Tabulator设置progressiveLoad: 'scroll'时初始加载所有行的问题

问题核心原因 #

你遇到的异常是配置参数冲突导致的：你使用了分页模式的paginationSize参数，但在滚动加载模式下，这个参数会干扰Tabulator的内部逻辑，引发全量加载与滚动加载行为的冲突，最终出现初始化加载所有分页、滚动时重复请求的问题。

修复方案 #

1. 替换专属参数：将paginationSize替换为滚动加载模式的专属参数progressiveLoadPageSize，用来指定每次滚动触发时加载的页数。
2. 调整滚动触发阈值：当前progressiveLoadScrollMargin: 300结合200px的表格高度，初始化时可能被判定为需要加载更多数据，适当调小该值（比如100），避免初始化阶段误触发多次请求。
3. 排除分页模式冲突：确认代码中没有启用pagination: true这类传统分页配置，确保完全以滚动加载模式运行。

修改后的配置代码 #

headerSortClickElement: 'icon',
movableColumns: true,
persistence: {
    sort: true,
    columns: true
},
height: '200px',
ajaxURL: getBaseUrl(),
ajaxURLGenerator: (url, _, params) => {
    return (
        url + endpointUrl + '?' + new URLSearchParams(params).toString()
    );
},
ajaxConfig: {
    headers: {
        Authorization: getAuthorizationHeader()
    }
},
progressiveLoad: 'scroll',
progressiveLoadScrollMargin: 100,
progressiveLoadPageSize: 2 // 替换原paginationSize参数

验证要点 #

修改后初始化阶段应仅加载第一页数据，滚动到接近表格底部时才会触发下一页请求，不会再出现全量加载的情况。如果异常仍存在，可检查后端接口是否正确处理page和size等分页参数，确保返回数据符合Tabulator的预期格式。

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