DataTables
提供了完善的前后台分页功能,现将后台分页的学习和使用过程总结如下,方便日后参考。
一、前台页面的配置
DataTables
几乎可以在不改变前台代码部分即可实现前台分页到后台分页的转换,唯一需要做的就是在代码中开启DataTables
后台分页功能即可:
"serverSide" : true,// 服务器端分页处理
至此完成了前台页面的配置(就是这么简单,最主要的是后台处理逻辑的改变)
二、后台处理逻辑的改变
要想使用后台分页,必须在后台使用服务器端语言处理过滤数据,然后将数据按照DataTables
的要求返回到前台即可(具体要求见下文)
DataTable
提供了一个用来统一处理数据的类ssp.class.php
,借用此类可以更加方便的实现后台逻辑部分
三、DataTables
参数信息
以下翻译仅供参考,如有错误请指正
开启后台分页后向后台发送的参数以及需要返回的数据要求如下:
发送的参数:
当通过服务器端处理一个请求时,DataTables
将发送如下数据给服务器端让其知道它所需要的数据
参数名称 | 参数类型 | 参数说明 |
---|---|---|
draw |
integer |
请求序号。由于Ajax请求是异步的,和返回的参数draw 一起用来确定序号 |
start |
integer |
当前从第几页开始(默认第一页为'0') |
length |
integer |
当前页所需要的数据条数(值为'-1'时代表返回所有的数据) |
search[value] |
string |
全局搜索的值(将应用在每一个设置为可搜索的列中) |
search[regex] |
boolean |
全局搜索是否启用正则表达式 |
order[i][column] |
integer |
排序将会应用到第i列 |
order[i][dir] |
string |
当前列的排序方向(asc =>正序,desc =>逆序) |
columns[i][data] |
string |
当前列数据源 |
columns[i][name] |
string |
当前列名称 |
columns[i][searchable] |
boolean |
当前列是否可搜索 |
columns[i][orderable] |
boolean |
当前列是否可排序 |
columns[i][search][value] |
string |
当前列搜索的值 |
columns[i][search][regex] |
boolean |
当前列搜索是否启用正则表达式 |
需要返回的参数:
DataTables
需要以JSON
的形式返回如下信息
参数名称 | 参数类型 | 参数说明 |
---|---|---|
draw |
integer |
请求序号(DataTables强烈建议将此参数强制转换为 int型 ,以阻止可能的XSS 攻击) |
recordsTotal |
integer |
过滤之前的总数据量 |
recordsFiltered |
integer |
过滤之后的总数据量 |
data |
array |
需要在表格中显示的数据 |
error |
string |
错误信息,可选参数 |
四、ssp
类使用示例
后台需要接收处理数据的文件server_processing.php
,参考代码如下:
<?php
/*
* DataTables example server-side processing script.
*
* Please note that this script is intentionally extremely simply to show how
* server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as
* for learning.
*
* See http://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - http://datatables.net/license_mit
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
// DB table to use
$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 simple
// indexes
$columns = array(
array( 'db' => 'first_name', 'dt' => 0 ),
array( 'db' => 'last_name', 'dt' => 1 ),
array( 'db' => 'position', 'dt' => 2 ),
array( 'db' => 'office', 'dt' => 3 ),
array(
'db' => 'start_date',
'dt' => 4,
'formatter' => function( $d, $row ) {
return date( 'jS M y', strtotime($d));
}
),
array(
'db' => 'salary',
'dt' => 5,
'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.
*/
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
五、Tips:
由于
ssp
类的限制(后期可自己改写,解除限制),无法进行多表查询,可通过创建视图的折中方式解决问题;可以使用
ssp
类中的complex
方法来实现对数据过滤更加高级的处理;