使用 Tabulator 分页的所需页面答案

【问题标题】：Desired page in pagination with Tabulator使用 Tabulator 分页的所需页面
【发布时间】：2020-08-13 16:04:10
【问题描述】：

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

【问题讨论】：

标签： javascript tabulator

【解决方案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/

【讨论】：

有没有办法将输入框中的页码显示为占位符，直到用户单击该框
table.getPage() 为您提供当前页码。所以使用它来查找数字并将输入占位符/值设置为该数字。
您好，我试过了，但是当点击“下一个，上一个，最后一个”时，占位符值没有更新。我应该发布一个新问题： document.getElementById("currentPage").placeholder = tabulator_table.getPage();
是的，您应该发布一个新问题。我会看看能不能给你一个答案。

【解决方案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));
                })

非常感谢

【讨论】：