Desired Page In Pagination With Tabulator

I am using Tabulator, I need to add input box that takes you to a desired page. If you have 10 pages and you want to go to page 9 you would just input 9 and hit enter. This feature

Solution 1:

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

You would need to use the table.setPage(x) function where table is your Tabulator instance and x is the page number you want to go to.

So here is an example of what the event listener function would look like on one of your elements.

function pageListener(event){
  if (isNaN(event.target.value)){
    // We don't want anything that isn't a number.return;
  }
  // Assuming that 'table' is a variable containing the// Tabulator instance
  table.setPage(Number(event.target.value));
}

And here is a working example. https://jsfiddle.net/nrayburn/fewqhuar/1/

Solution 2:

Based on @nrayburn-tech answer, I modified somethings to make the input box displayed in the tabulator footer.

//CSS
         #test  {
                color:black;
                text-align: center;
                position:center;
            }
     .jumpTo{
                width:30px;
                height:10px;
            }
//JS
       $(".tabulator-footer").append("<div id='test'><input class='jumpTo' title='insert number to jump to a page'></input></div>");
                document.getElementById("test").addEventListener('change', (event) => {
                    if (isNaN(event.target.value)) {
                        return;
                    }
                    tabulator_table.setPage(Number(event.target.value));
                })

Thank you a lot