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') )
    );
  }
} );