Желаемая страница в пагинации с помощью Tabulator

Question

Я использую Tabulator, мне нужно добавить поле ввода, которое приведет вас на нужную страницу. Если у вас есть 10 страниц, и вы хотите go до страницы 9, просто введите 9 и нажмите Enter. Эта функция доступна в DataTables, вот пример , так как это сделать с помощью Tabulator? спасибо

Answer 1

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

Вам необходимо использовать функцию table.setPage(x), где table - это ваш экземпляр Tabulator, а x - номер страницы, которую вы хотите go to.

Итак, вот пример того, как будет выглядеть функция прослушивателя событий для одного из ваших элементов.

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

А вот рабочий пример. https://jsfiddle.net/nrayburn/fewqhuar/1/

Answer 2

Основываясь на ответе @ nrayburn-tech, я кое-что изменил, чтобы поле ввода отображалось в нижнем колонтитуле табулятора.

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

Большое спасибо