Tabulator如何在当前行后加载更多行：追加数据替代分页？

可以实现，不需要启用Tabulator自带的全量分页功能，直接通过操作数据源+自定义底部栏的方式就能完成「Load More」逐批追加数据的效果。

核心实现逻辑 #

• 初始化表格时先加载第一批5条数据，无需开启Tabulator默认的分页配置
• 自定义表格底部工具栏，植入「Load More」交互按钮
• 给按钮绑定点击事件，每次触发时拉取后续5条数据，调用Tabulator内置的addData()方法即可直接将数据追加到表格末尾

示例代码 #

表格初始化 #

// 初始化表格，传入首批5条数据
const table = new Tabulator("#example-table", {
  columns: [
    // 此处替换为你的业务列配置
    {title: "姓名", field: "name"},
    {title: "年龄", field: "age"},
    {title: "职位", field: "position"}
  ],
  data: firstPageData, // 首次加载的5条初始数据
  // 自定义底部栏，插入加载按钮
  footerElement: `<button id="load-more-btn" style="padding: 6px 12px; margin: 8px 0;">Load More</button>`
});

加载更多事件绑定 #

// 配置加载参数
let currentOffset = 5; // 初始偏移量和首批数据量对齐
const PAGE_SIZE = 5; // 每次加载的条数

document.querySelector("#load-more-btn").addEventListener("click", () => {
  // 此处替换为你的实际数据请求逻辑，按偏移量拉取对应条数的数据
  const nextPageData = fetchDataByOffset(currentOffset, PAGE_SIZE);
  
  if (nextPageData.length > 0) {
    // 追加数据到表格底部
    table.addData(nextPageData);
    currentOffset += PAGE_SIZE;
  } else {
    // 无更多数据时禁用按钮
    const loadBtn = document.querySelector("#load-more-btn");
    loadBtn.disabled = true;
    loadBtn.textContent = "没有更多数据";
  }
});

补充说明 #

如果你的项目已经启用了Tabulator原生分页，不想改动现有逻辑，也可以在pageLoaded事件回调中获取新页数据，调用addData()追加后阻止默认的分页跳转行为即可，不过上文的自定义方案更轻量化，适配性更强。
如果后续数据总量较大，可以开启Tabulator的虚拟滚动配置，避免DOM节点过多导致页面卡顿。

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