Tabulator本地分页和远程分页

如果您更喜欢将数据显示为页面而不是滚动列表 Tabulator 也可以帮助您。

有两种可用的分页形式。本地分页，其中 Tabulator 将解析所有可用数据，然后对该数据集进行分页。或者远程分页，其中 Tabulator 将通过 Ajax 从远程服务器加载单个数据页面。

启用分页后，表底部将添加一个页脚元素，其中包含一系列导航控件，可让您的用户轻松地在页面之间切换。

如果启用分页，则在创建表格时将自动加载表格的第一页。

如果您是 Laravel 用户，那么您应该会发现自动生成的 URL 和数据处理直接开箱即用，无需额外配置。

注意：在启用分页时更改过滤器、排序或切换组可见性会将表格恢复到第一页。

远程分页

要启用远程分页，请将分页选项设置为remote，并使用ajaxURL参数设置 Ajax 请求的 url 。您还可以将一个可选对象传递给ajaxParams，用于您想通过 url 传递的任何参数（这些应该是静态参数、页码等，稍后会添加）。

默认情况下，页面大小将根据远程服务器返回的数据量设置，如果您需要告诉远程服务器发送多少行，您可以设置paginationSize参数。

var table = new Tabulator("#example-table", {pagination:true, //enable paginationpaginationMode:"remote", //enable remote paginationajaxURL:"http://testdata.com/data", //set url for ajax requestajaxParams:{token:"ABC123"}, //set any standard parameters to pass with the requestpaginationSize:5, //optional parameter to request a certain number of rows per pagepaginationInitialPage: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 paginationpaginationMode:"remote", //enable remote paginationajaxURL:"http://testdata.com/data", //set url for ajax requestpaginationDataSent:{"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 urlreturn 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 paginationpaginationMode:"remote", //enable remote paginationajaxURL:"http://testdata.com/data", //set url for ajax requestpaginationDataReceived:{"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

回调

一系列回调可用于分页。有关更多信息，请参阅分页回调部分。