使用 Tabulator 分页的所需页面

Question

我正在使用 Tabulator，我需要添加将您带到所需页面的输入框。如果您有 10 页并且您想转到第 9 页，您只需输入 9 并按回车键。此功能在 DataTables 中可用，这里是那么如何使用 Tabulator 做到这一点呢？谢谢

Answer 1

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

您需要使用 table.setPage(x) 函数，其中 table 是您的 Tabulator 实例，x 是您要转到的页码。

这里是事件侦听器函数在您的元素之一上的样子的示例。

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

非常感谢

使用 Tabulator 分页的所需页面

Desired page in pagination with Tabulator

javascript

tabulator