jquery datatable ajax配置詳解

https://www.cnblogs.com/keyi/p/6733738.html

 

我寫的這個東西類似於個人筆記，如果你想要完整的而瞭解 
可以去這裏看看 http://dt.thxopen.com/ 
包括英文原網站都不錯. 

通過配置ajax的屬性和服務器交互 

$("selector").dataTable( 
    "processing" : true,//顯示“處理中...” 
    "serverSide" : true,//開啓服務器模式。 
    "data":[....], 
    "ajax":{.....} 
); 

處理模式(Processing modes)

DataTables 中有兩種不同的方式處理數據(排序、搜索、分頁等):

• 客戶端處理（Client）—— 所有的數據集預先加載（一次獲取所有數據），數據處理都是在瀏覽器中完成的【邏輯分頁】。
• 服務器端處理（ServerSide）—— 數據處理是在服務器上執行（頁面只處理當前頁的數據）【物理分頁】。

每種模式都有自己的優點和缺點,選擇哪種模式是由你的數據量決定的。根據經驗來看,數據少於 10,000 行你可以選擇客戶端模式,超過 10,000 行的使用服務器端處理。 請注意,兩種處理模式不能同時使用,但是可以動態更改從一個模式到另一個。

PS:當然這個不是一定的，針對數據是可增長的，不確定最終數據是多少那麼最好是選擇服務器模式，如果是確定的數據，利用緩存選擇客戶端模式也未嘗不可

服務器模式  :需要啓用 serverSideOption 屬性，完整的介紹參考 服務器處理(server-side)

首先明確：ajax負責數據傳輸部分，columns負責定義數據（怎麼顯示，怎麼對應等） 

data就是一個數據源。用column定於數據的對應關係後。從data裏讀取實際數據。 

data可以是二維數組，或者是對象數組 
例子： 

Js代碼  

1. $('#example').dataTable( {  
2.     "data": [  
3.         [ "Tiger Nixon", "System Architect", "$3,120", "2011/04/25", "Edinburgh", 5421 ],  
4.         [ "Garrett Winters", "Director", "$8,422", "2011/07/25", "Edinburgh", 8422 ],  
5.         // ...  
6.     ]  
7.     //or...  
8.   "data": [  
9.         {  
10.             "name":       "Tiger Nixon",  
11.             "position":   "System Architect",  
12.             "salary":     "$3,120",  
13.             "start_date": "2011/04/25",  
14.             "office":     "Edinburgh",  
15.             "extn":       5421  
16.         },  
17.         {  
18.             "name": "Garrett Winters",  
19.             "position": "Director",  
20.             "salary": "5300",  
21.             "start_date": "2011/07/25",  
22.             "office": "Edinburgh",  
23.             "extn": "8422"  
24.         },  
25.         // ...  
26.     ],  
27.   
28. } );  

下面介紹正菜 
ajax 
他有三種用法： 
1.是一個string類型 
設置一個url對應一份遠程的json文件。他期待返回一個叫“data”的數組。如果你通過dataSrc指定爲對象，那他就要求返回一個對象數組。 
例子 

Js代碼  

1. $('#example').dataTable( {  
2.   "ajax": "data.json"  
3. } );  

2.是一個對象類型 
形式如： 

Js代碼  

1. ajax：{  
2.   url:"...",  
3.   type:"post",  
4.   //就是jquery.ajax那裏面能設置什麼他就能設置什麼，其實原理也是把這個配置對象傳給jquery.ajax那個函數執行。  
5.   //除此 他還支持三個特有的參數  
6.   data:"...",//設置發送給服務器的數據（名稱、格式）  
7.   dataSrc:"...",//這是從服務器接受的數據（名稱、格式）  
8.   success:'...'//回調函數。不要修改！DT會默認使用它。想改交互參數找前兩項就行  
9. }  

這種方式最好用，詳細介紹下那三個特殊參數： 

2.1 ajax.data 
他實際上就是$.ajax.data的屬性。DT有加了一些擴展 
2.1.1 如果是一個object 
你可以附加一下參數，連同DT提交的參數一起傳給服務器 
例子： 

Js代碼  

1. $('#example').dataTable( {  
2.   "ajax": {  
3.     "url": "data.json",  
4.     "data": {  
5.         "user_id": 451  
6.     }  
7.   }  
8. } );  

2.1.2 如果是一個function 
這個function接受一個object，代表了DT內部傳給服務器的data集合。 
可以返回一個object。這個object可以是你修改後的在請求參數集合(DT不會將他內建的data集合和這個object合併) 
也可以什麼都不返回（即返回空）。這樣DT會把默認的data集合傳給服務器（也可以在方法體裏把你定製的參數附加到data集合中，這樣穿data集合的時候也把附加參數傳回去了） 
例子： 

Js代碼  

1. $('#example').dataTable( {  
2.   "ajax": {  
3.     "url": "data.json",  
4.     "data": function ( d ) {  
5.         d.extra_search = $('#extra').val();  
6.     }  
7.   }  
8. } );  
9. $('#example').dataTable( {  
10.   "ajax": {  
11.     "url": "data.json",  
12.     "data": function ( d ) {  
13.       return $.extend( {}, d, {  
14.         "extra_search": $('#extra').val()  
15.       } );  
16.     }  
17.   }  
18. } );  

2.2 ajax.dataSrc 
處理從服務器返回來的請求集合 

2.2.1 如果是一個string 
指定用於dt中table body的數據對象名字（如果返回來的不是一個對象，而是一個純數組。那麼這個地方設爲""） 
一般ajax返回來的請求，除了數據部分，還包括分頁，排序等等其他信息 
這裏的string就是指數據部分對應的對象的名字。 
例子： 

Js代碼  

1. $('#example').dataTable( {  
2.   "ajax": {  
3.     "url": "data.json",  
4.     "dataSrc": "tableData"  
5.   }  
6. //假設傳回的集合是{tableData:[{...},{...}],page:{...},...}  
7. } );  

2.2.2 如果是一個function 
他就受一個object 代表了服務器發來的全部請求內容（不僅僅是data！） 
返回一個array 你定製完成以後，DT用來構造table的用的數據 
例子： 

Js代碼  

1. $('#example').dataTable( {  
2.   "ajax": {  
3.     "url": "data.json",  
4.     "dataSrc": function ( json ) {  
5.       for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {  
6.         json.data[i][0] = '<a href="/message/'+json.data[i][0]+'>View message</a>';  
7.       }  
8.       return json.data;  
9.     }  
10.   }  
11. } );  

2.3 sucess 
請求成功以後DT默認做的事情在這個函數中，因爲DT要使用這個做構建操作。所以不要覆蓋他。如果想修改，可以通過dataSrc或者下面介紹的完全控制的方式，修改接入點。 

3.如果ajax是一個function 
那麼你通過這個function可以完全控制ajax請求。 
function ajax( data, callback, settings ) 
data - 發送到服務器的參數 
callback - 回調函數 服務器回傳的集合應該傳給這個回調函數，作爲其參數 
settings - DT的配置對象。 
例子： 

Js代碼  

1. 1. $('#example').dataTable( {  
   2.   "ajax": function (data, callback, settings) {  
   3.     callback(  
   4.       JSON.parse( localStorage.getItem('dataTablesData') )  
   5.     );  
   6.   }  
   7. } );