Solution 1 :

Its been a while but i actually found that in Tabulator, no matter when the data being loaded, as long as i set the pagination config in Tabulator’s options, the pagination will be re-rendered after setData() get called. Even if setData() is called asynchronously.

The code will be:

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

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

The code above will display such effect:

  1. First rendering a empty table with no data exists, pagination shows but no actually functionalities.
  2. after 5 seconds data will be inserted into the table, pagination will be re-rendered, with complete functionalities.

Solution 2 :

http://tabulator.info/docs/4.6/page

You are looking for table.setPage(3);. Or whatever page number.

Problem :

I am currently using Tabulator this library and I see in the doc there is a method setData() which allows me to set the table data dynamically, however what i want achieve is after setting the table data i can then set the table pagination based on that.

The built in pagination functionality is achieved by passing pagination:"local" to the option object or send a ajax call using the remote pagination option. However my scenario is my client side is using socket-io to communicate with the server side, which i am not sure how to implement that. The pseudo code may like this:

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)
  }
})

Hope i explained my confusion clearly.

By