Tabulator V5升级后远程排序ajaxRequestFunc未触发问题求助

问题原因 #

Tabulator 5.x 版本重构了远程请求相关的配置体系，和 4.x 版本的参数命名、挂载逻辑存在不兼容，仅修改sortMode参数无法匹配原有的自定义请求逻辑。

修复步骤 #

1. 移除 4.x 版本的ajaxSorting: true配置项，该参数已在 5.x 中废弃，你已经设置的sortMode: "remote"已承担对应功能。
2. 将原配置中的ajaxRequestFunc参数重命名为ajaxRequestHandler，该参数为 Tabulator 5.x 的顶层配置项，无需嵌套在 ajax 配置块下。
3. 确认ajaxRequestHandler函数返回值为 Promise 类型，resolve 传入的内容即为表格要渲染的数据集，示例配置如下：

const table = new Tabulator("#example-table", {
  sortMode: "remote",
  ajaxURL: "/你的数据接口地址",
  ajaxRequestHandler: function(url, config, params) {
    alert("自定义请求触发");
    // 这里复用你之前在ajaxRequestFunc里的请求逻辑
    return new Promise((resolve, reject) => {
      // 发起自定义请求，请求成功后resolve返回的表格数据即可
    })
  },
  // 其他表格配置项
})

替代方案 #

如果你不需要使用 Tabulator 内置的 ajax 体系，也可以通过监听排序事件手动控制数据加载，灵活度更高：

const table = new Tabulator("#example-table", {
  sortMode: "remote",
  // 其他基础配置
})

// 监听排序触发事件
table.on("sort", function(sorters) {
  // sorters为当前排序规则数组，自行携带参数发起请求
  fetch("/你的接口地址", {
    method: "POST",
    body: JSON.stringify({ sort: sorters })
  }).then(res => res.json()).then(data => {
    // 拿到数据后手动更新表格
    table.setData(data)
  })
})

你遇到的点击列表头数据清空的问题是 Tabulator 远程排序的默认逻辑：触发排序时会先清空本地数据等待新的请求返回，请求函数未触发就会一直显示空数据，调整完配置后即可恢复正常。

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