Tabulator调用setData后分页每页展示条数与预设值不符问题
异常根因
- 核心原因:Tabulator组件全局默认的
paginationSize值为20,你调用无参数的table.setData()方法重载数据时,组件会重置分页配置为默认值,覆盖你初始化时设置的25条配置。 - 次要触发因素:你配置的
paginationSizeSelector可选值仅包含[50,100],初始设置的25不在可选列表中,旧版本Tabulator会在数据重载后自动将分页大小修正为默认值。
可直接落地的解决方案
按优先级选任意一种即可:
- 重载数据时显式保留分页大小
修改定时刷新的代码,重载数据后重新设置分页大小,兼容用户手动调整分页大小的场景:
setInterval( function () { const currentPageSize = table.getPageSize(); table.setData().then(() => { table.setPageSize(currentPageSize); }); }, 10000);
- 全局修改Tabulator默认分页大小
在初始化表格前添加配置,从根源避免重置为20条:
// 全局设置默认分页大小为25 Tabulator.defaults.paginationSize = 25; var table = new Tabulator("#ptable", { // 原有配置不变 height:"100%", layout: "fitData", pagination: "local", paginationSize: 25, paginationSizeSelector: [50, 100], ajaxURL: "api/products", columns: cols, });
- 补充分页大小选择器的可选值
将25加入paginationSizeSelector列表,让组件识别你初始化的配置:
paginationSizeSelector: [25, 50, 100],
验证方法
你可以在定时刷新的逻辑中添加日志快速确认根因:
setInterval( function () { console.log('刷新前分页大小:', table.getPageSize()); table.setData().then(() => { console.log('刷新后分页大小:', table.getPageSize()); }); }, 10000);
如果输出刷新前为25、刷新后为20,即可确认是上述根因导致的问题。
附问题场景截图:
初始状态:
刷新后异常状态:
内容的提问来源于stack exchange,提问作者xtlc
相关产品推荐
相关产品推荐

