datatable分页初体验

Posted on | In |
Words count in article: 1.2k

datatable是一款基于jQuery表格插件，在目前做的项目中用到了它，所以也了解了一点点。虽然它功能强大，但是对于菜鸟来说也折腾了不少时间。

datatable是一款基于jQuery表格插件，在目前做的项目中用到了它，所以也了解了一点点。虽然它功能强大，但是对于菜鸟来说也折腾了不少时间。

在正式讲它之前先放两个链接：

datatable jQuery官网
datatable中文网

我在具体实践中用到的datatable的功能主要是分页和全局搜索。
分页分为客户端分页和服务器端分页。

客户端分页

客户端分页即将数据全部从服务器请求回来之后客户端再用js将其分页展示的情况。这种客户端分页显示的方式适用于数据量小的时候，一旦数据量过大，在服务端请求数据的过程就非常之慢，我一开始尝试用客户端分页的方式时，从数据库请求上千条数据至少要用3秒。他的实现方法倒是很简单。再用它之前先填入两个js库，一个是jQuery的库，一个是datatable的库。

//code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
使用的时候只需要调用构造函数： $().DataTable();。
我的项目之中连调用函数的功夫都省了，我用的模板已经封装好了一些功能，用的时候在table里添加相应的类名就可以了。但是我的模板优点蠢的一点是table的列数必须大于等于5列才能实现分页搜索，我也不明白为什么，可能是封装的时候改了一些设置？

服务器端分页

服务器端分页适用于数据量大的情况。稍微要复杂一些，一言难尽。
多看几遍官网上这个例子就懂了。我这里解释一下例子里的代码：

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//既然是一个table，在HTML文档里首先声明这样的一个表格，id="example"
<table id="example" class="display" cellspacing="0" width="100%">
	//只用注明表头就行，表头一定要有，如果没有表头的需求的话，设置css属性style="display:none"不显示即可
   <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//调用$().DataTable();初始化表格，如果有两张表都要初始化的话，在初始化第二张表之前先把前一张表的初始化消除掉：$("#example").dataTable().fnDestroy();
//服务器端处理一定要设置"serverSide": true
//objects.php是服务器端的处理程序，通过ajax加载到服务器端的
//"columns"列数据点，告诉它在哪里获取该行中每个单元格的数据
$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "scripts/objects.php",
        "columns": [
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

服务器端处理程序，假设是objects.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?php

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Easy set variables
 */

// DB table to use
//datatables_demo你要查询的数据表的名字
$table = 'datatables_demo';

// Table's primary key 主键
$primaryKey = 'id';

// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case object
// parameter names
//上面英文都说了'db'参数代表数据表的列名，'dt'参数代表datatable中的table的列名
$columns = array(
    array( 'db' => 'first_name', 'dt' => 'first_name' ),
    array( 'db' => 'last_name',  'dt' => 'last_name' ),
    array( 'db' => 'position',   'dt' => 'position' ),
    array( 'db' => 'office',     'dt' => 'office' ),
    array(
        'db'        => 'start_date',
        'dt'        => 'start_date',
        'formatter' => function( $d, $row ) {
            return date( 'jS M y', strtotime($d));
        }
    ),
    array(
        'db'        => 'salary',
        'dt'        => 'salary',
        'formatter' => function( $d, $row ) {
            return '$'.number_format($d);
        }
    )
);

// SQL server connection information
//数据库的连接信息，不给他数据库它怎么查询数据呢
$sql_details = array(
    'user' => '',
    'pass' => '',
    'db'   => '',
    'host' => ''
);


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * If you just want to use the basic configuration for DataTables with PHP
 * server-side, there is no need to edit below this line.
 */

//这里引入的 ssp.class.php 是核心的服务器处理程序，如果没有特殊的返回结果的样式要求的话就可以不用修改它，直接引入用就可以了。
//如果想要修改返回结果进这个程序里根据自己的要求修改输出即可
require( 'ssp.class.php' );

//返回数据
echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

大体这样子datatable就可以为你工作了。分页异步加载数据，搜索功能都没问题，但是数据量太大了的话可能还是有点慢。
datatable是一个很强大的插件，更多更强大的功能还有待我去挖掘探索。