jquery datatable組件 官方文檔 之 服務器處理(Server-side processing)

http://datatables.club/manual/server-side.html

 

服務器處理(Server-side processing)

• 什麼是服務器模式？
• DT自動請求的參數
• 服務器需要返回的數據
• 如何開啓服務器模式？
• 服務器模式示例數據格式

什麼是服務器模式？

是不是發現在處理太多 DOM 數據或者 AJAX 一次性把數據獲得後，DataTables 表現的不是很滿意？這是肯定的， 因爲 DT 需要渲染，創建 tr/td ,所以數據越多，速度就越慢。 爲了解決這個問題 DataTables 提供了 服務器模式，把本來客戶端所做的事情交給服務器去處理， 比如排序（order）、分頁（paging）、過濾（filter）。對於客戶端來說這些操作都是比較消耗資源的， 所以打開服務器模式後不用擔心這些操作會影響到用戶體驗。

當你打開服務器模式的時候，每次繪製表格的時候，DataTables 會給服務器發送一個請求（包括當前分頁，排序，搜索參數等等）。DataTables 會向 服務器發送 一些參數 去執行所需要的處理，然後在服務器組裝好 相應的數據 返回給 DataTables。

開啓服務器模式需要使用 serverSideOption 和 ajaxOption ajax不定時一講 選項，進一步的信息，請參考下面的 配置選項。

DT自動請求的參數(Sent parameters)

當開啓了 服務器模式時，DataTables 會發送如下參數到服務器

ps:需要說明的是

• 如果你是 Java 開發者，那麼使用struts2的需要注意，會有錯誤拋出，因爲處理不了類似 columns[i][search][regex]的變量
• 如果是你 .net 開發者，那麼可能會遇到 maxQueryStringLength 的錯誤
• 如果是你 php 開發者，那麼恭喜你，php天生支持以上參數的解析，自動轉爲數組，好不公平啊

 

名稱	類型	描述
draw	integerJS	繪製計數器。這個是用來確保Ajax從服務器返回的是對應的（Ajax是異步的，因此返回的順序是不確定的）。 要求在服務器接收到此參數後再返回（具體看 下面）
start	integerJS	第一條數據的起始位置，比如0代表第一條數據
length	integerJS	告訴服務器每頁顯示的條數，這個數字會等於返回的 data集合的記錄數，可能會大於因爲服務器可能沒有那麼多數據。這個也可能是-1，代表需要返回全部數據(儘管這個和服務器處理的理念有點違背)
search[value]	stringJS	全局的搜索條件，條件會應用到每一列（ searchable需要設置爲 true ）
search[regex]	booleanJS	如果爲 true代表全局搜索的值是作爲正則表達式處理，爲 false則不是。 注意：通常在服務器模式下對於大數據不執行這樣的正則表達式，但這都是自己決定的
order[i][column]	integerJS	告訴後臺那些列是需要排序的。 i是一個數組索引，對應的是 columns配置的數組，從0開始
order[i][dir]	stringJS	告訴後臺列排序的方式， desc 降序 asc升序
columns[i][data]	stringJS	columns 綁定的數據源，由 columns.dataOption 定義。
columns[i][name]	stringJS	columns 的名字，由 columns.nameOption 定義。
columns[i][searchable]	booleanJS	標記列是否能被搜索,爲true代表可以，否則不可以，這個是由 columns.searchableOption 控制
columns[i][orderable]	booleanJS	標記列是否能排序,爲 true代表可以，否則不可以，這個是由 columns.orderableOption 控制
columns[i][search][value]	stringJS	標記具體列的搜索條件
columns[i][search][regex]	booleanJS	特定列的搜索條件是否視爲正則表達式， 如果爲 true代表搜索的值是作爲正則表達式處理，爲 false則不是。 注意：通常在服務器模式下對於大數據不執行這樣的正則表達式，但這都是自己決定的

order[i]和 columns[i]參數發送到服務器是數組信息：

• order[i] - 是一個數組，定義了多少列要被排序。比如，數組長度爲1，那麼就 只有一個列被排序，否則就是多個列被排序
• columns[i] - 是一個數組，定了這個表格裏所有的列

在這兩個情況下， iis an integer which will change to indicate the array value. In most modern server-side scripting environments this data will automatically be available to you as an array.

 

服務器需要返回的數據(Returned data)

一旦 DataTables 發送了請求，上面的參數就會傳送給服務器，那麼你需要接受到這些參數並做相應的邏輯處理然後按照下面的格式講組裝好的JSON數據返回 （不是每個參數都需要接受處理，根據自己的業務需要）

名稱	類型	描述
draw	integerJS	必要。上面提到了，Datatables發送的draw是多少那麼服務器就返回多少。 這裏注意，作者出於安全的考慮，強烈要求把這個轉換爲整形，即數字後再返回，而不是純粹的接受然後返回，這是 爲了防止跨站腳本（XSS）攻擊。
recordsTotal	integerJS	必要。即沒有過濾的記錄數（數據庫裏總共記錄數）
recordsFiltered	integerJS	必要。過濾後的記錄數（如果有接收到前臺的過濾條件，則返回的是過濾後的記錄數）
data	arrayType	必要。表中中需要顯示的數據。這是一個對象數組，也可以只是數組，區別在於 純數組前臺就不需要用 columns綁定數據，會自動按照順序去顯示 ，而對象數組則需要使用 columns綁定數據才能正常顯示。 注意這個 data的名稱可以由 ajaxOption ajax不定時一講 的 ajax.dataSrcOption ajax.dataSrc 1不定時一講 ajax.dataSrc 2不定時一講 控制
error	stringJS	可選。你可以定義一個錯誤來描述服務器出了問題後的友好提示

除了上面的返回參數以外你還可以加入下面的參數，來實現對錶格數據的自動綁定

名稱	類型	描述
DT_RowId	stringJS	自動綁定到 tr節點上
DT_RowClass	stringJS	自動把這個類名添加到 tr
DT_RowData	objectJS	使用 jQuery.data() 方法把數據綁定到row中，方便之後用來檢索（比如加入一個點擊事件）
DT_RowAttr	objectJS	自動綁定數據到 tr上，使用 jQuery.attr() 方法，對象的鍵用作屬性，值用作屬性的值。注意這個 需要 Datatables 1.10.5+的版本才支持

如何使用上面的參數，參考下面展示的 數據示例

如何開啓服務器模式（Configuration）

使用服務器模式需要啓用 serverSideOption 選項 ， 設置爲 true，並且配置 ajaxOption ajax不定時一講 設置url，告訴 DataTables 該 從那裏獲得數據

所以最簡單的服務器模式DT初始化代碼如下所示：

1 2 3 4 5 6

$('#example').DataTable( {    //開啓服務器模式     serverSide: true,    //數據來源（包括處理分頁，排序，過濾） ，即url，action，接口，等等     ajax: '/data-source' } );

ajaxOption ajax不定時一講 可以直接接受一個字符串也可以作爲一個對象使用。作爲對象他就像 jQuery.ajax 配置一樣

比如我要 DataTables 以post方式發送的請求，代碼如下

1 2 3 4 5 6 7

$('#example').DataTable( {     serverSide: true,     ajax: {         url: '/data-source',         type: 'POST'     } } );

在 DataTables 中的 ajax選項配置詳細參考 ajaxOption ajax不定時一講

老版（Legacy）

1.9-版中發送給服務器的參數和 1.10+的有所不同。但是Datatables爲1.9-的腳本做了兼容模式， 你可以使用高版本的js兼容低版本的寫法，但是反過來則不行。 舊的是使用 sAjaxSource 而新的是使用 ajaxOption ajax不定時一講 或者通過設置 0.fn.dataTable.ext.legacy.ajax = true;

1.9版本服務器操作的文檔看請 參考這裏

服務器模式示例數據格式（Example data）

服務器模式處理的例子，返回數組作爲數據源 ， 完整例子

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

{     "draw": 1,     "recordsTotal": 57,     "recordsFiltered": 57,     "data": [         [             "Angelica",             "Ramos",             "System Architect",             "London",             "9th Oct 09",             "$2,875"         ],         [             "Ashton",             "Cox",             "Technical Author",             "San Francisco",             "12th Jan 09",             "$4,800"         ],         ...     ] }

服務器模式例子，返回對象數組作爲數據源 ， 完整例子

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

{     "draw": 1,     "recordsTotal": 57,     "recordsFiltered": 57,     "data": [         {             "name":"Angelica",             "age":"Ramos",             "office":"System Architect",             "address":"London",             "date":"9th Oct 09",             "salary":"$2,875"         },         {             "name":"Ashton",             "age":"Cox",             "office":"Technical Author",             "address":"San Francisco",             "date":"12th Jan 09",             "salary":"$4,800"         },         ...     ] }

服務器模式例子,返回使用對象還包括DT_RowId 和 DT_RowData（完整例子 ）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

{     "draw": 1,     "recordsTotal": 57,     "recordsFiltered": 57,     "data": [         {             "DT_RowId": "row_3",             "DT_RowData": {                 "pkey": 3             },             "first_name": "Angelica",             "last_name": "Ramos",             "position": "System Architect",             "office": "London",             "start_date": "9th Oct 09",             "salary": "$2,875"         },         {             "DT_RowId": "row_17",             "DT_RowData": {                 "pkey": 17             },             "first_name": "Ashton",             "last_name": "Cox",             "position": "Technical Author",             "office": "San Francisco",             "start_date": "12th Jan 09",             "salary": "$4,800"         },         ...     ] }

http://datatables.net/manual/server-side

Translation from DataTables.net, with permission