DataTables後臺分頁的使用

DataTables提供了完善的先後臺分頁功能，現將後臺分頁的學習和使用過程總結以下，方便往後參考。

1、前臺頁面的配置

DataTables幾乎能夠在不改變前臺代碼部分便可實現前臺分頁到後臺分頁的轉換，惟一須要作的就是在代碼中開啓DataTables後臺分頁功能便可：

"serverSide" : true,// 服務器端分頁處理

至此完成了前臺頁面的配置（就是這麼簡單，最主要的是後臺處理邏輯的改變）

2、後臺處理邏輯的改變

要想使用後臺分頁，必須在後臺使用服務器端語言處理過濾數據，而後將數據按照DataTables的要求返回到前臺便可（具體要求見下文）

DataTable提供了一個用來統一處理數據的類ssp.class.php，借用此類能夠更加方便的實現後臺邏輯部分

3、DataTables參數信息

如下翻譯僅供參考，若有錯誤請指正
開啓後臺分頁後向後臺發送的參數以及須要返回的數據要求以下：

1. 發送的參數：
   當經過服務器端處理一個請求時，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	當前列搜索是否啓用正則表達式

1. 須要返回的參數：
   DataTables須要以JSON的形式返回以下信息

參數名稱	參數類型	參數說明
draw	integer	請求序號（DataTables強烈建議將此參數強制轉換爲int型，以阻止可能的XSS攻擊）
recordsTotal	integer	過濾以前的總數據量
recordsFiltered	integer	過濾以後的總數據量
data	array	須要在表格中顯示的數據
error	string	錯誤信息，可選參數

4、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 )
);

5、Tips:

1. 因爲ssp類的限制（後期可本身改寫，解除限制），沒法進行多表查詢，可經過建立視圖的折中方式解決問題；

2. 可使用ssp類中的complex方法來實現對數據過濾更加高級的處理；

參考文檔：

1. 官方Manual: Server-side processing;

2. 官方examples: Server-side processing;

3. DataTablesGitHub地址.

關於我

文章轉載自個人博客：
Heier Blog:Heier Home