jquery datatable ajax配置详解

我写的这个东西类似于个人笔记，如果你想要完整的而了解 
可以去这里看看 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. } );