这个场景太常见了，我之前做项目也碰到过，其实DataTable本身就提供了现成的方法来搞定，不用自己折腾分页搜索参数的保存~

核心思路：利用DataTable的内置重载方法 #

首先，你得确保能拿到DataTable的实例——初始化表格的时候把它存成变量，别直接链式调用就完事了：

// 初始化表格时保存实例，方便后续调用
const myDataTable = $('#your-table-selector').DataTable({
  // 你的配置项，比如 ajax 数据源、columns 定义这些
});

情况1：使用Ajax数据源的表格（大部分后端渲染的场景） #

当你完成新增/编辑/删除的Ajax请求（一定要等请求成功哦！），直接调用ajax.reload()方法，重点是第二个参数设为false：

// 举个删除操作的例子，Ajax成功后重载表格
$('.delete-btn').on('click', function() {
  const rowId = $(this).data('row-id');
  
  $.post('/api/delete-row', { id: rowId }, function(res) {
    if (res.success) {
      // 重载表格，第二个false表示不重置分页/搜索/排序状态
      myDataTable.ajax.reload(null, false);
    }
  });
});

这里的null是重载时的回调函数（可选），false才是关键——它告诉DataTable：不要把分页跳回第一页，保留当前的搜索关键词、排序规则和分页位置。

情况2：本地数据源的表格（前端直接渲染数据） #

如果你的表格数据是前端生成的，不是从后端Ajax拉取的，那可以先更新DataTable的数据，再调用draw(false)：

• 新增行：

// 添加新行数据后，保留当前状态渲染
myDataTable.row.add([
  '新内容1',
  '新内容2',
  // 对应表格的每一列数据
]).draw(false);

• 编辑行：

// 找到要编辑的行，更新数据后渲染
const targetRow = $(this).closest('tr');
myDataTable.row(targetRow).data([
  '更新后的内容1',
  '更新后的内容2'
]).draw(false);

• 删除行：

// 直接删除目标行后渲染
const targetRow = $(this).closest('tr');
myDataTable.row(targetRow).remove().draw(false);

几个注意点 #

• 一定要在数据操作成功后再调用重载/绘制方法，不然会出现表格数据和后端不一致的情况；
• 如果你的表格有自定义的状态保存（比如用stateSave: true），这个方法也会完美兼容，不会破坏已保存的状态；
• 要是你不确定实例有没有拿到，可以用$('#your-table-selector').DataTable()重新获取——注意是DataTable()（大写D），不是初始化时的dataTable()（小写d），后者返回的是jQuery对象，前者才是DataTable实例。

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