How to show and update current page number in an input box palceholder Using Tabulator

Question

I am trying to show the current page number in an input box as a place holder the issue is I can't figure out how to update the value when users go to another page. Here is what I tried:

    <input id="currentPage"/>
 document.getElementById("currentPage").placeholder = tabulator_table.getPage(); 

Here is the first part of the question Here is sample

Answer 1

You want to use the pageLoaded callback on the table instance.

When creating the table, you need to add a property for pageLoaded as a function with a parameter for the page number. This callback is triggered each time the page is loaded.

Here is a working example, https://jsfiddle.net/nrayburn/w68d75Lq/1/.

So you would do something like this, where #table is the element id for the table and input is a reference to your input element where you keep the page number value.

  new Tabulator('#table', {
    ...tableOptions,
    pageLoaded: (pageNumber) => {
      input.value = pageNumber
    }
  });