DataTables ajax.reload() 丢失页面

Posted 2023-05-08

【中文标题】DataTables ajax.reload() 丢失页面

【英文标题】：DataTables ajax.reload() loses page

【发布时间】：2017-08-11 20:10:23

【问题描述】：

我正在使用 jQuery 数据表。在 ajax 请求之后，我调用 the ajax.reload() 方法来刷新我的 dataTable 但我丢失了当前页面。它返回第一页。

这是我的 DataTables 初始化：

datatable_appointments = $('#datatable_appointments').DataTable(
    "responsive" : true,
    "processing" : true,
    "serverSide": true,
    "bSort" : false,
    "ajax": function(data, callback, settings) 
        // make a regular ajax request using data.start and data.length
        $.get(URL_API + URL_APPOINTMENTS_STATE + '/', 
            limit: data.length,
            offset: data.start,
            search: data.search.value
        , function(res) 
            if (res.error) 
                callback(
                    recordsTotal: 0,
                    recordsFiltered: 0,
                    data : ""
                );
             else 
                data_appointments = res.data;
                // map your server's response to the DataTables format and pass it to
                // DataTables' callback
                callback(
                    recordsTotal: res.total_data,
                    recordsFiltered: res.total_data,
                    data: res.data
                );
                $("#datatable_appointments > tbody > tr > td").addClass("text-center");
                $("#datatable_appointments > tbody > tr > td").css("vertical-align", "middle");
                $("#datatable_appointments > thead > tr > th").addClass("text-center");
            
        );
    ,
    "columns" : [
         "data": "service_name",
         "data": "doctor_info",
         "data": "patient_name", render: function (data, type, row, meta) 
            return row.name + " " + row.surname;
        ,
         "data": "appointment_date", render: function (data, type, row, meta) 
            var formattedDate = new Date(row.appointment_date);
            var day = formattedDate.getDate();
            var month =  formattedDate.getMonth();
            var hours = (formattedDate.getHours().toString().length == 1) ? '0' + formattedDate.getHours() : formattedDate.getHours();
            hours += ':';
            hours += (formattedDate.getMinutes().toString().length == 1) ? formattedDate.getMinutes() + '0' : formattedDate.getMinutes();
            return day + ' ' + months[month] + ', ' + hours;
        ,
         "data": "state", render: function (data, type, row, meta) 
            if (row.state == '0')
                return '<i class="fa fa-circle font-red-mint"></i><br />İptal';
            else if (row.state == '1')
                return '<i class="fa fa-circle font-green-jungle"></i><br />Onaylı';
            else if (row.state == '2')
                return '<i class="fa fa-circle font-grey-salsa"></i><br />Beklemede';
        ,
         "data": "actions", render: function (data, type, row, meta) 
            if (row.state == '2')
                return '<div class="btn-group btn-group-circle">' +
                            '<button type="button" onclick="setState(\''+row.id+'\', \'1\');" class="btn btn-outline green btn-sm">Onayla</button>' +
                            '<button type="button" onclick="setState(\''+row.id+'\', \'0\');" class="btn btn-outline red btn-sm">İptal Et</button>' +
                        '</div>';
            else
                return '';
        
    ],
    "sPaginationType": "full_numbers",
    "language": 
        "emptyTable": "Kayıt bulunamadı.",
        "sZeroRecords": "Bu kriterde sonuç bulunamadı.",
        "search": "Bul",
        "sProcessing" : "<img src='/assets/global/img/loading-spinner-blue.gif' />",
        "sInfo": "Toplam <b>_TOTAL_</b> veri bulunmaktadır.",
        "sLengthMenu": "Gösterilen kayıt sayısı _MENU_",
        "sInfoFiltered": "",
        "sInfoEmpty":"",
        "paginate": 
            "sPrevious": "Önceki",
            "sNext": "Sonraki",
            "sFirst" : "İlk",
            "sLast" : "Son"
        

    
);

还有我在同一个 js 文件中的 setState 方法：

function setState(id, state) 
    $.ajax(
        url : URL_API + URL_APPOINTMENTS_STATE + '/' + id,
        type : 'put',
        data : 'state' : state,
        dataType : 'json',
        success : function (response) 
            if (response.error) 

             else 
                datatable_appointments.ajax.reload();
            
        
    );

【参考方案1】：

您需要传递参数以保持当前页面，例如：

datatable_appointments.ajax.reload( null, false )

来源：https://datatables.net/reference/api/ajax.reload()

【讨论】：

您好！这确实有效，但我们遇到的问题是，如果我们有例如 3 个页面，那么我们删除第 3 个页面中的所有元素并刷新，即使现在页面总和为 2，dataTables 也会显示第 3 个空页面。

【参考方案2】：

  $(document).ready(function() 
        $('#table_id').DataTable( 
            stateSave: true
         );
    );

任何正在使用 jQuery DataTables 并想要执行任务的人，例如重新加载页面，或者编辑，删除，会面临丢失当前页面并导航到第一页的问题，这个sn-p会帮助他留在同一页面，避免从当前页面返回到第一页。

【讨论】：

savestate 应该在 ", "stateSave": true 之间