Tabulator渐进式Ajax加载场景下全量数据接收后如何应用前端过滤

最优实现方案（无需修改源码） #

你之前修改源码的方案能解决问题，但会带来版本升级后需要重新适配的维护成本，可直接用Tabulator自带的事件回调实现相同效果：

方案1：监听pageLoaded事件（推荐） #

dataLoaded回调仅在全量数据首次加载完成时触发，所以渐进加载的后续分页不会触发，而pageLoaded事件会在每一页数据（包括渐进加载的所有分页）加载完成后触发，每次仅执行一次，不会有rowAdded逐行触发的性能问题：

// 防抖定时器，避免高频触发过滤
let filterRefreshTimer = null;
const table = new Tabulator("#your-table-id", {
    // 保留你原有的所有配置
    ajaxProgressiveLoad: "load",
    // 新增事件监听
    pageLoaded: function (pageNo, pageData) {
        clearTimeout(filterRefreshTimer);
        filterRefreshTimer = setTimeout(() => {
            this.refreshFilter();
        }, 30); // 不需要防抖可直接去掉定时器，直接调用refreshFilter即可
    }
});

方案2：使用ajaxResponse回调兼容特殊场景 #

如果你的场景下pageLoaded触发不符合预期，可使用请求返回回调在每次分页数据拿到后触发过滤：

const table = new Tabulator("#your-table-id", {
    ajaxProgressiveLoad: "load",
    ajaxResponse: function (url, params, response) {
        // 异步等待数据插入表格完成后再执行过滤
        setTimeout(() => this.refreshFilter(), 0);
        return response;
    }
});

以上两种方案的性能和你修改源码的效果完全一致，每加载一页仅触发一次全量过滤，不需要改动Tabulator核心源码，后续版本升级也无需重新适配。

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