如果您更喜欢将数据显示为页面而不是滚动列表 Tabulator 也可以帮助您。
有两种可用的分页形式。本地分页，其中 Tabulator 将解析所有可用数据，然后对该数据集进行分页。或者远程分页，其中 Tabulator 将通过 Ajax 从远程服务器加载单个数据页面。
启用分页后，表底部将添加一个页脚元素，其中包含一系列导航控件，可让您的用户轻松地在页面之间切换。
如果启用分页，则在创建表格时将自动加载表格的第一页。
如果您是 Laravel 用户，那么您应该会发现自动生成的 URL 和数据处理直接开箱即用，无需额外配置。
注意：在启用分页时更改过滤器、排序或切换组可见性会将表格恢复到第一页。
远程分页
要启用远程分页，请将分页选项设置为remote，并使用ajaxURL参数设置 Ajax 请求的 url 。您还可以将一个可选对象传递给ajaxParams，用于您想通过 url 传递的任何参数（这些应该是静态参数、页码等，稍后会添加）。
默认情况下，页面大小将根据远程服务器返回的数据量设置，如果您需要告诉远程服务器发送多少行，您可以设置paginationSize参数。
var table = new Tabulator("#example-table", {
pagination:true, //enable pagination
paginationMode:"remote", //enable remote pagination
ajaxURL:"http://testdata.com/data", //set url for ajax request
ajaxParams:{token:"ABC123"}, //set any standard parameters to pass with the request
paginationSize:5, //optional parameter to request a certain number of rows per page
paginationInitialPage:2, //optional parameter to set the initial page to load
});请求网址
Tabulator 会在用户选择页面时自动创建页面请求 URL。
默认情况下，将使用提供的ajaxURL和一些系统生成的参数生成一个 url ：
- page - 请求的页码
- size - 页面的行数（如果设置了paginationSize）
- sorters - 第一个当前分拣机（如果有）
- filter - 当前过滤器的数组（如果有）
如果您需要更改任何这些参数的名称以适应您现有的系统，您可以使用paginationDataSent选项来设置备用参数名称。
var table = new Tabulator("#example-table", {
pagination:true, //enable pagination
paginationMode:"remote", //enable remote pagination
ajaxURL:"http://testdata.com/data", //set url for ajax request
paginationDataSent:{
"page":"pageNo", //change page request parameter to "pageNo"
} ,
});自定义分页 URL 构建
如果您需要对请求 URL 进行更复杂的控制，您可以向ajaxURLGenerator选项传递一个回调，以返回您希望用于每个页面的 URL，页码和页面大小等分页信息可以在婴儿车中找到争论
var table = new Tabulator("#example-table", {
ajaxURLGenerator:function(url, config, params){
//url - the url from the ajaxURL property or setData function
//config - the request config object from the ajaxConfig property
//params - the params object from the ajaxParams property, this will also include any pagination, filter and sorting properties based on table setup
//return request url
return url + "?params=" + encodeURI(JSON.stringify(params)); //encode parameters as a json object
},
});注意：如果您使用分页器功能，您将需要手动将排序和过滤参数添加到请求 url 中（如果需要）。
返回的响应数据
远程服务器应返回具有以下结构的 JSON 格式对象：
{
"last_page":15, //the total number of available pages (this value must be greater than 0)
"data":[ // an array of row data objects
{id:1, name:"bob", age:"23"}, //example row data object
]
}如果您需要更改任何这些参数的名称以适合您现有的系统，您可以使用paginationDataReceived选项来设置备用参数名称。
var table = new Tabulator("#example-table", {
pagination:true, //enable pagination
paginationMode:"remote", //enable remote pagination
ajaxURL:"http://testdata.com/data", //set url for ajax request
paginationDataReceived:{
"last_page":"max_pages", //change last_page parameter name to "max_pages"
} ,
});本地分页
本地分页的工作原理是将整个数据集加载到表中，然后生成该数据的分页视图。
分页模块默认设置为使用本地分页，因此要启用本地模式分页，简单地通过将分页选项设置为true来启用表分页。
var table = new Tabulator("#example-table", {
pagination:true, //enable pagination.
});设置页面大小
对于本地分页，有几种方法可以设置每页中的行数。
您可以通过设置paginationSize选项在表创建期间指定页面大小。如果没有指定高度选项，表格将调整大小以适应页面上的行数。
var table = new Tabulator("#example-table", {
pagination:true, //enable.
paginationSize:5, // this option can take any positive integer value
});或者，如果您在 CSS 中或使用height选项指定表格的高度，并且未定义paginationSize选项，则页面大小将自动设置为填充表格的高度。
var table = new Tabulator("#example-table", {
height:"300px",
pagination:true, //enable.
});注意：如果您设置表格的高度并使用paginationSize选项，则行数可能无法填满可用空间，或者无法容纳在表格中，并且会出现垂直滚动条。
设置初始页面
默认情况下，当表格最初加载时，Tabulator 将加载第一页数据。您可以使用paginationInitialPage选项指定在首次加载表时应加载特定页面。
var table = new Tabulator("#example-table", {
pagination:true, //enable pagination.
paginationInitialPage:2, // this option can take any positive integer value (default = 1)
});分页控制元素
自定义分页控制元素
默认情况下，分页控件被添加到表格的页脚。如果您希望在另一个元素中创建控件，请将 DOM 节点或该元素的 CSS 选择器传递给paginationElement选项。
var table = new Tabulator("#example-table", {
pagination:true,
paginationElement:paginationElement, //build pagination controls in this element
});设置分页按钮数
使用paginationButtonCount选项在页脚中显示的分页页面按钮的数量。默认情况下，它的值为 5。
var table = new Tabulator("#example-table", {
paginationButtonCount:3, //use 3 page buttons in the footer
});显示页面大小选择元素
如果您希望用户能够设置每页上的行数，您可以使用paginationSizeSelector选项，该选项会将页面大小选择选择元素添加到表格页脚。
自动生成页面大小列表
将此选项设置为true将导致 Tabulator 创建一个页面大小选项列表，这些选项是当前页面大小的倍数。在下面的示例中，列表的值为 5、10、15 和 20。
像这样使用页面大小选择器时，如果使用setPageSize函数将页面大小设置为不在列表中的值，则会使用新的页面大小作为起始值重新生成列表
var table = new Tabulator("#example-table", {
pagination:true,
paginationSize:5,
paginationSizeSelector:true, //enable page size select element and generate list options
});指定页面大小列表
如果要指定可用的页面大小，可以将整数数组传递给paginationSizeSelector选项。
var table = new Tabulator("#example-table", {
pagination:true,
paginationSize:10,
paginationSizeSelector:[10, 25, 50, 100], //enable page size select element with these options
});像这样使用页面大小选择器时，如果使用setPageSize函数将页面大小设置为不在列表中的值，它将被添加到列表顶部
您还可以将布尔值true传递到数组中，这将显示一个“全部”选项，该选项将显示一页上的所有可用行
var table = new Tabulator("#example-table", {
pagination:true,
paginationSize:10,
paginationSizeSelector:[10, 25, 50, 100, true], //select list with an "all" option at the end of the list
});页面大小标签
启用页面大小选择器后，它会显示在文本标签的右侧，以明确其用途。如果要更改此标签中的文本，可以通过本地化模块进行更新
添加行行为
在分页表上使用addRow函数时，将相对于当前页面（即当前页面的顶部或底部）添加行，而溢出的行将移至下一页。
如果您希望相对于表格（第一页/最后一页）添加行，那么您可以使用paginationAddRow选项。它可以采用以下两个值之一：
- page - 添加相对于当前页面的行（默认）
- table - 添加相对于表格的行
var table = new Tabulator("#example-table", {
pagination:true,
paginationAddRow:"table", //add rows relative to the table
});管理分页
许多附加控件可用于帮助自定义分页体验。
设置当前页面
启用分页后，表格页脚将包含许多用于浏览数据的分页控件。
除了这些控件之外，还可以使用setPage函数更改页面
table.setPage(5); // show page 5
该setPage函数有一个参数，它应该是代表你想看到页面的整数。还有四个字符串可以传递给特殊函数的参数。
- "first" - 显示第一页
- "prev" - 显示上一页
- "next" - 显示下一页
- "last" - 显示最后一页
该setPage方法返回一个承诺，这可以用于运行具有数据已经被加载到表中后运行的任何其它命令。通过在 promise 中运行它们，您可以确保它们仅在表加载数据后运行。
table.setPage(1)
.then(function(){
//run code after table has been successfuly updated
})
.catch(function(error){
//handle error loading data
});加载下一页
您可以使用nextPage函数更改为显示下一页。
table.nextPage(); // load the next page的下一页方法返回一个承诺，这可以用于运行具有数据已经被加载到表中后运行的任何其它命令。通过在 promise 中运行它们，您可以确保它们仅在表加载数据后运行。
table.nextPage()
.then(function(){
//run code after table has been successfuly updated
})
.catch(function(error){
//handle error loading data
});加载上一页
您可以使用previousPage函数更改为显示下一页。
table.previousPage(); // load the previous page该|上一页方法返回一个承诺，这可以用于运行具有数据已经被加载到表中后运行的任何其它命令。通过在 promise 中运行它们，您可以确保它们仅在表加载数据后运行。
table.previousPage()
.then(function(){
//run code after table has been successfuly updated
})
.catch(function(error){
//handle error loading data
});加载特定行的页面
您可以使用setPageToRow函数加载特定行的页面，并传入要滚动到的行的任何标准行组件查找选项。
table.setPageToRow(12); // load the previous page
该setPageToRow方法返回一个承诺，这可以用于运行具有数据已经被加载到表中后运行的任何其它命令。通过在 promise 中运行它们，您可以确保它们仅在表加载数据后运行。
table.setPageToRow(12)
.then(function(){
//run code after table has been successfuly updated
})
.catch(function(error){
//handle error loading data
});如果您有特定行的行组件，您可以调用组件上的pageTo函数来加载该行的页面。
row.pageTo(); //load page that contains row
仅限本地分页
此功能仅适用于本地分页。使用远程分页时 Tabulator 有办法查找请求的行所在的页面。
更改页面大小
您可以随时使用setPageSize函数更改页面大小。（如果使用服务器设置的页面大小进行远程分页，则此设置将被忽略）
table.setPageSize(50); // show 50 rows per page
获取页面大小
要检索每页允许的行数，您可以调用getPageSize函数：
var pageSize = table.getPageSize(); // returns number of rows allowed per page获取当前页码
要检索当前页面，请使用getPage函数。这将返回当前页面的编号。如果分页被禁用，这将返回false。
table.getPage(); // returns current page
获取最大页码
要检索最大可用页面，请使用getPageMax函数。这将返回最大可用页面的数量。如果分页被禁用，这将返回false。
table.getPageMax(); // returns maximum page
回调
一系列回调可用于分页。有关更多信息，请参阅分页回调部分。