让tablepress具备分页条的功能

用过wordpress的人都知道，tablepress有分页功能，但是没有分页条的功能，而且很多人可能不知道怎么自定义tablepress这个强大的插件，一般来说tablepress表格通常我们看到的是：

这样的，但是我们的目标是这样的：

然后在这个网站好的了启发，最开始不是很清楚这个是如何工作的，后面才慢慢揭开这个问题的真相，请跟着我的步伐一步一步的往下看。

首先我们先安装tablepress这个插件，我们可以在wordpress后台搜索，然后安装，步骤跟普通的插件安装没什么两样。安装完毕后，我们开始新建一个表格作为测试。

表格新建完毕后会有一个短码我这边是[table id=1 /]，随着我们新建表格的增多，每个表格会有单独的一个短码，然后我们新建一个测试页面，在编辑器里面粘贴这个短码

[table id=1 /]

然后在页面的前台就看到了这个表格，这是我们看到tablepress最原始的样子，后台我们开启了所有的功能，如果数据够多，会发现有个下一页和上一页，但是是没有类似1、2、3这样的分页条。

好的，现在我们把一下的代码加入一个页面，在代码模式（html）下添加：

<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#example').dataTable( {
 "paging": true
 } );
} );
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%" data-order='[[ 1, "asc" ]]' data-page-length='15'>
 <thead>
 <tr>
 <th>Name</th>
 <th>Position</th>
 <th>Office</th>
 <th>Age</th>
 <th>Start date</th>
 <th data-class-name="priority">Salary</th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <th>Name</th>
 <th>Position</th>
 <th>Office</th>
 <th>Age</th>
 <th>Start date</th>
 <th>Salary</th>
 </tr>
 </tfoot>
 <tbody>
 <tr>
 <td>Tiger Nixon</td>
 <td>System Architect</td>
 <td>Edinburgh</td>
 <td>61</td>
 <td>2011/04/25</td>
 <td>$320,800</td>
 </tr>
 <tr>
 <td>Garrett Winters</td>
 <td>Accountant</td>
 <td>Tokyo</td>
 <td>63</td>
 <td>2011/07/25</td>
 <td>$170,750</td>
 </tr>
 <tr>
 <td>Howard Hatfield</td>
 <td>Office Manager</td>
 <td>San Francisco</td>
 <td>51</td>
 <td>2008/12/16</td>
 <td>$164,500</td>
 </tr>
 <tr>
 <td>Jonas Alexander</td>
 <td>Developer</td>
 <td>San Francisco</td>
 <td>30</td>
 <td>2010/07/14</td>
 <td>$86,500</td>
 </tr>
 <tr>
 <td>Shad Decker</td>
 <td>Regional Director</td>
 <td>Edinburgh</td>
 <td>51</td>
 <td>2008/11/13</td>
 <td>$183,000</td>
 </tr>
 <tr>
 <td>Michael Bruce</td>
 <td>Javascript Developer</td>
 <td>Singapore</td>
 <td>29</td>
 <td>2011/06/27</td>
 <td>$183,000</td>
 </tr>
 <tr>
 <td>Donna Snider</td>
 <td>Customer Support</td>
 <td>New York</td>
 <td>27</td>
 <td>2011/01/25</td>
 <td>$112,000</td>
 </tr>
 </tbody>
</table>
</body>
</html>

然后我们在tablepress里面设置每页显示2行记录，那么将会出现分页条。这里很重要的有以下几点：

第一点、调用jquery.dataTables.js这个库，这个是整个功能的核心库，由于jquery.dataTables.js是依赖jquery的，那么我们需要引入jquery在这个库的前面。

第二点、我们要添加一个自定义的javascript，代码如下：

<script>
$(document).ready(function() {
$('#example').dataTable( {
 "paging": true
 } );
} );
</script>

这里的意思是调用id，启用分页功能，example是表格的id，如果是多个表格，那么我们需要命名不同的id值，然后在脚本处进行一个初始化，但不可重复多次初始化。

当然，还有其他很多的定义方式，具体的可以参考这个页面；如果要构建一个类似的页面，我们可以参考这个网址https://www.datatables.net/manual/installation。

步骤写得很清楚，前提是先安装tablepress这个插件。

第三点、引入css样式表，这个可以引入，也可以不引入，引入的话，表格会更美观，但是可能会带来css样式污染，会影响到网站本省的样式，不引入也不会影响表格的功能。

第四点、id值必须要一致，javascript里面的id要跟表格的id要对应得到。

剩下的就是如果想要表格功能更丰富，那么我们就可以在自定义的javascript代码中自己添加。

设置选项

DataTable的配置是通过将要定义的选项作为对象传递给DataTable构造函数来完成的。例如：

$('#example').DataTable( {
    paging: false
} );

这使用该paging选项禁用表的分页。

假设您要启用在表中滚动 – 您将使用以下scrollY选项：

$('#example').DataTable( {
    scrollY: 400
} );

扩展它，您可以将多个选项合并到单个对象中。在这种情况下，我们启用滚动并禁用分页：

$('#example').DataTable( {
    paging: false,
    scrollY: 400
} );

这里要提醒下，以上的这些不是分别添加，上面说了同一个id下可以添加很多选项，我的意思是如下：

$('#example').DataTable( {
    paging: false,
    scrollY: 400,
    "searching": false,
    "ordering": false,
} );

以上的意思是在id为example这个表格中，禁用分页，Y方向开启滚动长度为400的高度，禁用搜索，排序功能不开启。

传入的对象只是一个标准的Javascript对象，我们可以这样理解，当然有更多更丰富的选项设置，可以参考这个页面：https://www.datatables.net/reference/option/

好的，更多学习tablepress可以访问这个网址：https://www.datatables.net/manual/options

未经允许不得转载：哈勃私语 » 让tablepress具备分页条的功能

本文共3427个字创建时间：2017年10月28日17:30

设置选项

相关推荐