You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Tabulator调用setData后分页每页展示条数与预设值不符问题

异常根因
  • 核心原因:Tabulator组件全局默认的paginationSize值为20,你调用无参数的table.setData()方法重载数据时,组件会重置分页配置为默认值,覆盖你初始化时设置的25条配置。
  • 次要触发因素:你配置的paginationSizeSelector可选值仅包含[50,100],初始设置的25不在可选列表中,旧版本Tabulator会在数据重载后自动将分页大小修正为默认值。
可直接落地的解决方案

按优先级选任意一种即可:

  1. 重载数据时显式保留分页大小
    修改定时刷新的代码,重载数据后重新设置分页大小,兼容用户手动调整分页大小的场景:
setInterval( function () {
    const currentPageSize = table.getPageSize();
    table.setData().then(() => {
        table.setPageSize(currentPageSize);
    });
}, 10000);
  1. 全局修改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,
});
  1. 补充分页大小选择器的可选值
    将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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.05 23:45:04