使用制表器在页码中显示所需页面。

Question

我正在使用Tabulator，我需要添加输入框，将你带到一个所需的页面。如果你有10页，你想去第9页，你只需要输入9，然后按回车键。例子那么如何做这个与Tabulator？ 谢谢你

Answer 1

http:/tabulator.infodocs4.6page#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.netnrayburnfewqhuar1

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

谢谢你