时间戳

首页 > 解决方案 > 在制表器中设置数据后如何设置分页？

javascript - 在制表器中设置数据后如何设置分页？

问题描述

我目前正在使用Tabulator这个库，我在文档中看到有一种方法setData()可以让我动态设置表格数据，但是我想要实现的是在设置表格数据之后我可以根据它设置表格分页。

内置分页功能是通过传递pagination:"local"给选项对象或使用远程分页选项发送 ajax 调用来实现的。但是我的场景是我的客户端正在使用 socket-io 与服务器端进行通信，我不知道如何实现它。伪代码可能是这样的：

const table = new Tabulator('#my-table', {
  ...
})

socketio.subscribe({
  ...,
  callback: function(data) {
    // get data from server side
    table.setData(data)
    // how to set pagination based on that?
    // is there a method called setPagination() ?
    table.setPagination(data)
  }
})

希望我清楚地解释了我的困惑。

标签： javascripthtml-tabletabulator

解决方案

好久不见，其实我发现在Tabulator中，无论何时加载数据，只要我在Tabulator的选项中设置分页配置，setData()调用后分页都会重新渲染。即使setData()被异步调用。

代码将是：

const table = new Tabulator("#example-table", {
  // set pagination mode in local
  pagination: "local",
  paginationSize: 5,
  ...
})

setTimeout(() => {
  // simulate async data loaded
  table.setData(data)
}, 5000)

上面的代码会显示这样的效果：

  1. 首先渲染一个没有数据的空表，分页显示但没有实际功能。
  2. 5秒后数据会被插入到表格中，分页会被重新渲染，功能齐全。

推荐阅读