如何在jQuery DataTable中保存分页状态及控制编辑/新增后页面跳转

我来给你拆解这两个场景的实现方法，都是利用DataTable自带的API就能轻松搞定：

一、编辑用户后返回原页面 #

核心思路是编辑前先记住当前页码，编辑完成后重新加载数据并切回该页码：

1. 首先确保你已经获取了DataTable的实例，比如：

   const userTable = $('#your-table-id').DataTable();
   

2. 在触发编辑操作（比如点击编辑按钮）时，先保存当前页面的索引（注意DataTable的页码是从0开始的，第1页对应索引0，第2页是1，以此类推）：

   // 点击编辑按钮时执行
   const currentPageIndex = userTable.page();
   

3. 完成编辑的AJAX请求后，在成功回调里重新加载表格数据，并切回之前保存的页码：

   $.ajax({
     url: '/your-edit-api',
     method: 'POST',
     data: yourEditedUserData,
     success: function(res) {
       // 重新加载数据，第二个参数false表示不重置分页状态
       userTable.ajax.reload(() => {
         // 数据加载完成后跳回原页面，draw(false)保留排序/筛选状态
         userTable.page(currentPageIndex).draw(false);
       }, false);
     }
   });
   

这样编辑完成后，表格就会停在你之前操作的页面啦～

二、新增用户后回到第1页 #

因为你的数据是按降序排列的，新增的用户会排在最前面，所以我们只需要在新增成功后重新加载数据，并主动切换到第一页：

$.ajax({
  url: '/your-add-api',
  method: 'POST',
  data: yourNewUserData,
  success: function(res) {
    // 重新加载数据后手动跳转到第一页
    userTable.ajax.reload(() => {
      // 索引0对应第1页，draw(false)保留其他状态
      userTable.page(0).draw(false);
    }, true);
  }
});

额外注意点 #

• 如果编辑后原页面的记录数不足（比如原第3页只有1条数据，编辑后这条数据被删除了），DataTable会自动跳转到最后一页，这是合理的默认行为，不用额外处理。
• 确保你的DataTable初始化时开启了分页（paging: true），并且AJAX数据源配置正确，后端返回的是符合DataTable要求的JSON格式。

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