Datatables回调后保留选中页码、刷新时清除排序搜索过滤状态的方法咨询

解决方案 #

分两种场景对应不同实现方式：

场景1：修改内容后仅表格ajax重载，没有刷新整个页面 #

直接在编辑保存成功的逻辑里加以下代码即可，不需要额外存状态，也不用改初始化配置：

var tableApi = $('#forumList').DataTable();
// 先清空所有排序、搜索、列过滤状态
tableApi.search('').order([]).columns().search('');
// 重载表格数据，第二个参数设为false表示不重置当前页码
tableApi.ajax.reload(null, false);

同时删除你之前加的saveState: true配置和页面刷新清状态的冗余代码即可。

场景2：修改内容后会刷新整个页面 #

需要手动存储当前页码，初始化表格时读取页码跳转，同时清空其他状态：

1. 首先在编辑保存触发页面刷新前，存储当前页码：

// 页码从0开始计数，存在sessionStorage即可，关闭页面自动失效
sessionStorage.setItem('dt_forum_page', $('#forumList').DataTable().page());

2. 修改表格初始化配置，增加初始化完成回调：

$(function () {
  var dataTableoOBJ = $("#forumList").dataTable({
    "lengthChange": true,
    "processing": true,
    "serverSide": true,
    "ajax": "/admin/forums/data",
    "createdRow": function (row, data, rowIndex) {
      $.each($('td', row), function (colIndex) {
        $(this).attr('data-id', data.id);
      });
    },
    'columns': [{...}],
    // 新增以下回调逻辑
    "initComplete": function () {
      var api = this.api();
      // 清空所有非页码状态
      api.search('') // 清空全局搜索
         .order([]) // 清空排序规则
         .columns().search('') // 清空列过滤
         .draw(false); // 重绘不重置页码
      
      // 读取存储的页码
      var savePage = sessionStorage.getItem('dt_forum_page');
      if (savePage !== null) {
        // 跳转到对应页码
        api.page(parseInt(savePage)).draw(false);
        // 用完删掉存储值，避免下次正常进入页面错误跳转
        sessionStorage.removeItem('dt_forum_page');
      }
    }
  });
});

3. 删除之前加的saveState: true配置和原有的页面刷新清状态代码即可。

内容的提问来源于stack exchange，提问作者Vishwesh Chotaliya