DataTables后台分页的使用

DataTables提供了完善的前后台分页功能,现将后台分页的学习和使用过程总结如下,方便日后参考。

一、前台页面的配置

DataTables几乎可以在不改变前台代码部分即可实现前台分页到后台分页的转换,唯一需要做的就是在代码中开启DataTables后台分页功能即可:

"serverSide" : true,// 服务器端分页处理

至此完成了前台页面的配置(就是这么简单,最主要的是后台处理逻辑的改变)

二、后台处理逻辑的改变

要想使用后台分页,必须在后台使用服务器端语言处理过滤数据,然后将数据按照DataTables的要求返回到前台即可(具体要求见下文)

DataTable提供了一个用来统一处理数据的类ssp.class.php,借用此类可以更加方便的实现后台逻辑部分

三、DataTables参数信息

以下翻译仅供参考,如有错误请指正
开启后台分页后向后台发送的参数以及需要返回的数据要求如下:

  1. 发送的参数:
    当通过服务器端处理一个请求时,DataTables将发送如下数据给服务器端让其知道它所需要的数据

参数名称参数类型参数说明
drawinteger请求序号。由于Ajax请求是异步的,和返回的参数draw一起用来确定序号
startinteger当前从第几页开始(默认第一页为'0'
lengthinteger当前页所需要的数据条数(值为'-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当前列搜索是否启用正则表达式
  1. 需要返回的参数:
    DataTables需要以JSON的形式返回如下信息

参数名称参数类型参数说明
drawinteger请求序号(DataTables强烈建议将此参数强制转换为int,以阻止可能的XSS攻击)
recordsTotalinteger过滤之前的总数据量
recordsFilteredinteger过滤之后的总数据量
dataarray需要在表格中显示的数据
errorstring错误信息,可选参数

四、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:

  1. 由于ssp类的限制(后期可自己改写,解除限制),无法进行多表查询,可通过创建视图的折中方式解决问题;

  2. 可以使用ssp类中的complex方法来实现对数据过滤更加高级的处理;

参考文档:

  1. 官方Manual: Server-side processing;

  2. 官方examples: Server-side processing;

  3. DataTablesGitHub地址.

关于我

文章转载自我的博客:
Heier Blog:Heier Home

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值