使用ajax.reload()刷新jQuery DataTable并向服务器传递参数

没问题，这事儿我熟！要让刷新按钮带着参数去请求服务器，其实有几种灵活的方式，取决于你是要复用初始化时的参数，还是每次刷新都传新的动态参数。

情况1：复用初始化时的动态参数 #

如果你的表格初始化时已经用了data函数来动态生成参数（比如从输入框、下拉框取最新值），那其实不用额外改太多——dt.ajax.reload()会自动重新执行这个data函数，把最新的参数传给服务器。

举个例子：

// 初始化表格
var myTable = $('#my-datatable').DataTable({
  ajax: {
    url: '/your-server-api',
    // 初始化时定义动态参数生成逻辑
    data: function() {
      return {
        userId: $('#current-user-id').val(),
        filterStatus: $('#status-select').val()
      };
    }
  },
  columns: [/* 你的列配置 */],
  buttons: [
    {
      text: "<span class='some-icon-class'></span>Refresh",
      className: "some-button-class",
      action: function (e, dt, node, config) {
        // 直接调用reload，会自动执行上面的data函数传最新参数
        // 第二个参数false表示保持当前分页，true会回到第一页
        dt.ajax.reload(null, false);
      }
    }
  ]
});

这种方式最省心，只要初始化时的data函数逻辑正确，每次刷新都会自动带上最新的参数。

情况2：刷新时传递额外/更新的参数 #

如果需要在刷新时临时加参数，或者覆盖原有参数，那可以在按钮的action里先修改表格的ajax配置，再执行reload：

buttons: [
  {
    text: "<span class='some-icon-class'></span>Refresh",
    className: "some-button-class",
    action: function (e, dt, node, config) {
      // 先更新ajax的data配置，加入新参数
      dt.ajax.data(function() {
        return {
          // 保留初始化时的必要参数
          userId: $('#current-user-id').val(),
          // 新增或修改的参数
          refreshTriggered: true,
          currentPage: dt.page.info().page // 比如传递当前页码
        };
      });
      // 重新加载数据，可选添加回调函数
      dt.ajax.reload(function(json) {
        console.log('刷新完成，返回数据:', json);
      }, false);
    }
  }
]

关键知识点 #

• dt.ajax.reload(callback, resetPaging)：第一个参数是数据加载完成后的回调函数，第二个参数resetPaging设为false会保持当前分页位置，true则回到第一页。
• 如果你的请求是POST类型，参数会放在请求体里；如果是GET，会自动拼在URL后面，DataTables会帮你处理好格式。
• 如果需要一次性修改请求URL和参数，可以用dt.ajax.url('new-url').data(newParams).load()，不过刷新场景下一般不用改URL，只改参数就行。

这样调整后，你的刷新按钮就能带着正确的参数去服务器拉取最新数据啦！

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