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可以是二維數組，或者是對象數組 
例子： 

$('#example').dataTable( {
    "data": [
        [ "Tiger Nixon", "System Architect", "$3,120", "2011/04/25", "Edinburgh", 5421 ],
        [ "Garrett Winters", "Director", "$8,422", "2011/07/25", "Edinburgh", 8422 ],
        // ...
    ]
    //or...
  "data": [
        {
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       5421
        },
        {
            "name": "Garrett Winters",
            "position": "Director",
            "salary": "5300",
            "start_date": "2011/07/25",
            "office": "Edinburgh",
            "extn": "8422"
        },
        // ...
    ],

} );

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

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

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

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

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

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

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": {
        "user_id": 451
    }
  }
} );

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

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
        d.extra_search = $('#extra').val();
    }
  }
} );
$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
      return $.extend( {}, d, {
        "extra_search": $('#extra').val()
      } );
    }
  }
} );

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

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

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

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

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "dataSrc": function ( json ) {
      for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
        json.data[i][0] = '<a href="/message/'+json.data[i][0]+'>View message</a>';
      }
      return json.data;
    }
  }
} );

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

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

$('#example').dataTable( {
  "ajax": function (data, callback, settings) {
    callback(
      JSON.parse( localStorage.getItem('dataTablesData') )
    );
  }
} );