刷新页面而不丢失dataTable中的活动分页-JQuery

时间:2019-04-23 03:33:46

标签: javascript php jquery ajax datatables

我想在使用ajax提交表单后继续选择数据表的分页。

当前代码可以很好地保存数据并将其显示为数据表格式,但是每当我尝试保存数据表时,它都会一直返回到第一页,但是我想做的是保留所选内容页号处于活动状态,以便用户轻松查看数据。

这几个小时我读过一些话题。

stateSave: true

添加此代码将解决问题。但是我尝试了没事

我当前的Ajax代码:

    function refresh_Table(){
    $.ajax({
        headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url: "{{ route('printdate') }}",
        method: "GET",
        data:{}, 
        success:function(data)
        {
            $('#table_DTR').html(data);

            $('#table_time_records').dataTable({
                "serverSide": false, 
                "retrieve": true, 
                "ordering": false
            });
        },
        error: function(xhr, ajaxOptions, thrownError){
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
}

我当前在Ajax中保存的数据代码:

$(document).on("click", ".btnApplyAlter", function(){

    var a = $('select[name=table_time_records_length]').val();
    validation_altered_data();    
    if(counter_alter_validation == 0)
    {
        $("select[name=table_time_records_length] option[value='365']").remove(); 
        $('select[name=table_time_records_length]').val(a).trigger('change');
        alert("Check the row you want to apply alter");   
    }
    else if(checker_validation == "false")
    { 
        $("select[name=table_time_records_length] option[value='365']").remove(); 
        $('select[name=table_time_records_length]').val(a).trigger('change');
        alert(error);
    }
    else
    {
        var c = confirm("Apply this alteration?");
        if(c == true)
        {
            $('.reason').prop("disabled", false);

            $.ajax({
                headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: "{{ route('applyalteration') }}",
                method: "POST",
                data: $('#alteration_data').serialize(), 
                beforeSend: function()
                {
                    document.getElementById('loader').style.display = "block";
                },
                success:function(data)
                {
                    if(data == "w")
                    {
                        alert("You don't have schedule for this day!");
                        $("select[name=table_time_records_length] option[value='365']").remove(); 
                        $('select[name=table_time_records_length]').val(a).trigger('change');   
                        $('.reason').prop("disabled", true);   
                    }
                    else
                    {
                        $("select[name=table_time_records_length] option[value='365']").remove(); 
                        $('select[name=table_time_records_length]').val(a).trigger('change');          
                        alert("Alteration Applied!");
                    } 
                },
                complete:function(){
                    refresh_Table();
                    document.getElementById('loader').style.display = "none";
                }
            }); 
        }
        else{
            $("select[name=table_time_records_length] option[value='365']").remove(); 
            $('select[name=table_time_records_length]').val(a).trigger('change');
        }
    } 
});

此图显示了我尝试使用并播放此代码时的输出

    "bStateSave": true,
    "fnStateSave": function (oSettings, oData) {
        localStorage.setItem('offersDataTables', JSON.stringify(oData));
    },
    "fnStateLoad": function (oSettings) {
        return JSON.parse(localStorage.getItem('offersDataTables'));
    }

enter image description here

0 个答案:

没有答案