摘要:提供了完善的前后臺分頁功能,現(xiàn)將后臺分頁的學(xué)習(xí)和使用過程總結(jié)如下,方便日后參考。
DataTables提供了完善的前后臺分頁功能,現(xiàn)將后臺分頁的學(xué)習(xí)和使用過程總結(jié)如下,方便日后參考。
一、前臺頁面的配置DataTables幾乎可以在不改變前臺代碼部分即可實(shí)現(xiàn)前臺分頁到后臺分頁的轉(zhuǎn)換,唯一需要做的就是在代碼中開啟DataTables后臺分頁功能即可:
"serverSide" : true,// 服務(wù)器端分頁處理
至此完成了前臺頁面的配置(就是這么簡單,最主要的是后臺處理邏輯的改變)
二、后臺處理邏輯的改變要想使用后臺分頁,必須在后臺使用服務(wù)器端語言處理過濾數(shù)據(jù),然后將數(shù)據(jù)按照DataTables的要求返回到前臺即可(具體要求見下文)
三、DataTables參數(shù)信息DataTable提供了一個用來統(tǒng)一處理數(shù)據(jù)的類ssp.class.php,借用此類可以更加方便的實(shí)現(xiàn)后臺邏輯部分
以下翻譯僅供參考,如有錯誤請指正
開啟后臺分頁后向后臺發(fā)送的參數(shù)以及需要返回的數(shù)據(jù)要求如下:
發(fā)送的參數(shù):
當(dāng)通過服務(wù)器端處理一個請求時,DataTables將發(fā)送如下數(shù)據(jù)給服務(wù)器端讓其知道它所需要的數(shù)據(jù)
參數(shù)名稱 | 參數(shù)類型 | 參數(shù)說明 |
---|---|---|
draw | integer | 請求序號。由于Ajax請求是異步的,和返回的參數(shù)draw一起用來確定序號 |
start | integer | 當(dāng)前從第幾頁開始(默認(rèn)第一頁為"0") |
length | integer | 當(dāng)前頁所需要的數(shù)據(jù)條數(shù)(值為"-1"時代表返回所有的數(shù)據(jù)) |
search[value] | string | 全局搜索的值(將應(yīng)用在每一個設(shè)置為可搜索的列中) |
search[regex] | boolean | 全局搜索是否啟用正則表達(dá)式 |
order[i][column] | integer | 排序?qū)?yīng)用到第i列 |
order[i][dir] | string | 當(dāng)前列的排序方向(asc=>正序,desc=>逆序) |
columns[i][data] | string | 當(dāng)前列數(shù)據(jù)源 |
columns[i][name] | string | 當(dāng)前列名稱 |
columns[i][searchable] | boolean | 當(dāng)前列是否可搜索 |
columns[i][orderable] | boolean | 當(dāng)前列是否可排序 |
columns[i][search][value] | string | 當(dāng)前列搜索的值 |
columns[i][search][regex] | boolean | 當(dāng)前列搜索是否啟用正則表達(dá)式 |
需要返回的參數(shù):
DataTables需要以JSON的形式返回如下信息
參數(shù)名稱 | 參數(shù)類型 | 參數(shù)說明 |
---|---|---|
draw | integer | 請求序號(DataTables強(qiáng)烈建議將此參數(shù)強(qiáng)制轉(zhuǎn)換為int型,以阻止可能的XSS攻擊) |
recordsTotal | integer | 過濾之前的總數(shù)據(jù)量 |
recordsFiltered | integer | 過濾之后的總數(shù)據(jù)量 |
data | array | 需要在表格中顯示的數(shù)據(jù) |
error | string | 錯誤信息,可選參數(shù) |
后臺需要接收處理數(shù)據(jù)的文件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類的限制(后期可自己改寫,解除限制),無法進(jìn)行多表查詢,可通過創(chuàng)建視圖的折中方式解決問題;
可以使用ssp類中的complex方法來實(shí)現(xiàn)對數(shù)據(jù)過濾更加高級的處理;
參考文檔:官方Manual: Server-side processing;
官方examples: Server-side processing;
DataTablesGitHub地址.
關(guān)于我文章轉(zhuǎn)載自我的博客:
Heier Blog:Heier Home
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/21358.html
摘要:再看看另一個方法,的提供的數(shù)據(jù)統(tǒng)計(jì)總條數(shù)的方法是的,默認(rèn)計(jì)算分頁總數(shù)是根據(jù)數(shù)組計(jì)算的,而的數(shù)據(jù)就是我們查詢賦值給提供器的。統(tǒng)計(jì)總數(shù)預(yù)處理函數(shù)直接獲取通過函數(shù)獲取傳遞給數(shù)據(jù)提供器的數(shù)據(jù)總和。 首先看看ArrayDataProvider官方的doc: ArrayDataProvider implements a data provider based on a data array.Ar...
摘要:使用方便,快捷。但有時候用戶需求對分頁有需求,例如輸入頁數(shù)進(jìn)行分頁跳轉(zhuǎn)。 DataTable使用方便,快捷。但有時候用戶需求對分頁有需求,例如輸入頁數(shù)進(jìn)行分頁跳轉(zhuǎn)。這樣就需要擴(kuò)展功能了,datatable也支持自定義擴(kuò)展,下面以使用DataTable bootstrap分頁為例 1. 初始化DataTable var $table = $(#listTable); var lis...
摘要:背景因項(xiàng)目需要,選擇了這款表格插件做數(shù)據(jù)展示。在實(shí)際開發(fā)過程中,需要將所有的搜索條件放在頁面頂部,所以我需要的搜索和分頁條數(shù)單獨(dú)提出來。解決辦法辦法其實(shí)很簡單,只需要參考的官網(wǎng)文檔就可找到。 背景 因項(xiàng)目需要,選擇了DataTables這款表格插件做數(shù)據(jù)展示。在實(shí)際開發(fā)過程中,需要將所有的搜索條件放在頁面頂部,所以我需要DataTables的搜索和分頁條數(shù)單獨(dú)提出來。 解決辦法 辦法其...
摘要:簡介與的作用一樣,比更漂亮是一款表格插件。它是一個高度靈活的工具,可以將任何表格添加高級的交互功能。 DataTables簡介 與EasyUI的Datagrid作用一樣,比easyui更漂亮 Datatables是一款jquery表格插件。它是一個高度靈活的工具,可以將任何HTML表格添加高級的交互功能。 支持分頁、排序、搜索 支持4種數(shù)據(jù)源 支持多種主題 擁有多種擴(kuò)展 文件引入 ...
摘要:簡介與的作用一樣,比更漂亮是一款表格插件。它是一個高度靈活的工具,可以將任何表格添加高級的交互功能。 DataTables簡介 與EasyUI的Datagrid作用一樣,比easyui更漂亮 Datatables是一款jquery表格插件。它是一個高度靈活的工具,可以將任何HTML表格添加高級的交互功能。 支持分頁、排序、搜索 支持4種數(shù)據(jù)源 支持多種主題 擁有多種擴(kuò)展 文件引入 ...
閱讀 2161·2021-09-04 16:40
閱讀 1452·2021-08-13 15:07
閱讀 3605·2019-08-30 15:53
閱讀 3194·2019-08-30 13:11
閱讀 1069·2019-08-29 17:22
閱讀 1811·2019-08-29 12:47
閱讀 1469·2019-08-29 11:27
閱讀 2221·2019-08-26 18:42