更改数据表的分页按钮

大家好，我是网络系统部的 Hase。

上次我写了如何提高 DataTables 的显示速度

介绍

默认情况下，DataTables 显示分页按钮，如下图所示。

实际上，您可以更改此分页按钮的显示。

不过虽然官方文档上有明确说明，但它是英文写的，奇怪的是没有日文介绍的文章，所以我想借此机会在这里介绍一下。

方法

方法非常简单。

pagingType作为选项并指定参数即可。

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // 显示分页按钮 "pagingType": "simple_numbers" }); });

在上面的代码中，它是
simple_numbers 通过更改此设置，您可以通过多种方式更改分页按钮的显示。

下面介绍可以指定的参数。

简单数字

它由“上一页”和“下一页”按钮以及页码

如果未设置pagingType

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // 显示分页按钮 "pagingType": "simple_numbers" }); });

■ 显示

数字

它仅由页码按钮

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // 显示分页按钮 "pagingType": "numbers" }); });

■ 显示

简单的

它仅由“上一个”和“下一个”按钮

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // 显示分页按钮 "pagingType": "simple" }); });

■ 显示

满的

它由“第一个”、“上一个”、“下一个”和“最后一个”按钮

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // 显示分页按钮 "pagingType": "full" }); });

■ 显示

完整数字

它由“第一”、“上一页”、“下一页”、“最后一页”按钮和页码

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // 显示分页按钮 "pagingType": "full_numbers" }); });

■ 显示

第一个最后一个数字

它由“First”和“Last”按钮以及页码

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // 显示分页按钮 "pagingType": "first_last_numbers" }); });

■ 显示

他们有六个。

您还可以通过添加插件来配置上面列出的设置以外的设置。
这次我将介绍一些可能有用的摘录。

输入

它由“第一个”、“上一个”、“下一个”和“最后一个”按钮以及使用输入标签的页面规范

■ 插件

<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.20/pagination/input.js"></script>

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // 显示分页按钮 "pagingType": "input" }); });

■ 显示

列表框

在选择框中指定

■ 插件

<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.20/pagination/select.js"></script>

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // 显示分页按钮 "pagingType": "listbox" }); });

■ 显示

还有很多其他插件，请参考官方文档。
https://datatables.net/plug-ins/pagination/

概括

通过这种方式，您可以轻松更改分页按钮的显示。
如果你的页面数量很多，full_numbers会更容易切换页面，所以我认为会更方便。
请尝试一下。

最后

我开设了我所属的系统开发服务网站“SEKARAKU Lab”。
Beyond是从服务器设计搭建到运营的一站式服务，所以如果您在服务器端开发方面遇到任何问题，请随时联系我们。
SEKARAKU 实验室： [https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

就这样。