修改数据表分页按钮

您好，我是网络系统部门的 Hase。

上次如何加快数据表的显示速度我写了

介绍

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

实际上，您可以更改这些分页按钮的显示方式。

确实提到了，但它是用英文写的，而且用日语介绍它的文章出奇地少，所以我决定借此机会在这里介绍一下。

方法

这个方法非常简单。

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

■ jQuery

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

上面的代码中，`simple_numbers`部分。
通过修改这部分，你可以以各种方式改变分页按钮的显示方式。

下面列出了可以指定的参数。

简单数字

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

pagenType选项，则将自动使用此设置。

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

■ 展示

名字_姓氏_数字

“首页”和“末页”按钮以及页码它由

■ 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
Lab：[https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

就这样。