DataTables后臺分頁的使用

ChristmasBoy 發布于2019-06-27 12:00 / 2395人閱讀

摘要：提供了完善的前后臺分頁功能，現將后臺分頁的學習和使用過程總結如下，方便日后參考。

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,參考代碼如下：

 "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方法來實現對數據過濾更加高級的處理；

參考文檔：

官方Manual: Server-side processing;

官方examples: Server-side processing;

DataTablesGitHub地址.

關于我

文章轉載自我的博客：
Heier Blog:Heier Home

GPU云服務器云服務器分頁的存儲過程分頁的樣式html js分頁的學習視頻發一個分頁的js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/21358.html

重寫yii2的數據提供器ArrayDataProvider類

摘要：再看看另一個方法，的提供的數據統計總條數的方法是的，默認計算分頁總數是根據數組計算的，而的數據就是我們查詢賦值給提供器的。統計總數預處理函數直接獲取通過函數獲取傳遞給數據提供器的數據總和。首先看看ArrayDataProvider官方的doc： ArrayDataProvider implements a data provider based on a data array.Ar...

xiaokai 2019-06-27 13:56 評論0 收藏0
datatables增加跳轉指定頁功能, datatable自定義分頁

摘要：使用方便，快捷。但有時候用戶需求對分頁有需求，例如輸入頁數進行分頁跳轉。 DataTable使用方便，快捷。但有時候用戶需求對分頁有需求，例如輸入頁數進行分頁跳轉。這樣就需要擴展功能了，datatable也支持自定義擴展，下面以使用DataTable bootstrap分頁為例 1. 初始化DataTable var $table = $(#listTable); var lis...

skinner 2019-08-26 18:26 評論0 收藏0
DataTables自定義分頁條數實現

摘要：背景因項目需要，選擇了這款表格插件做數據展示。在實際開發過程中，需要將所有的搜索條件放在頁面頂部，所以我需要的搜索和分頁條數單獨提出來。解決辦法辦法其實很簡單，只需要參考的官網文檔就可找到。背景因項目需要，選擇了DataTables這款表格插件做數據展示。在實際開發過程中，需要將所有的搜索條件放在頁面頂部，所以我需要DataTables的搜索和分頁條數單獨提出來。解決辦法辦法其...

xuexiangjys 2019-08-22 13:48 評論0 收藏0
DataTables表格插件使用說明

摘要：簡介與的作用一樣，比更漂亮是一款表格插件。它是一個高度靈活的工具，可以將任何表格添加高級的交互功能。 DataTables簡介與EasyUI的Datagrid作用一樣，比easyui更漂亮 Datatables是一款jquery表格插件。它是一個高度靈活的工具，可以將任何HTML表格添加高級的交互功能。支持分頁、排序、搜索支持4種數據源支持多種主題擁有多種擴展文件引入 ...

weij 2019-08-29 12:26 評論0 收藏0
DataTables表格插件使用說明

摘要：簡介與的作用一樣，比更漂亮是一款表格插件。它是一個高度靈活的工具，可以將任何表格添加高級的交互功能。 DataTables簡介與EasyUI的Datagrid作用一樣，比easyui更漂亮 Datatables是一款jquery表格插件。它是一個高度靈活的工具，可以將任何HTML表格添加高級的交互功能。支持分頁、排序、搜索支持4種數據源支持多種主題擁有多種擴展文件引入 ...

bovenson 2019-08-20 15:52 評論0 收藏0