JQuery的dataTable實現分頁

關於dataTable基本使用有不少帖子說的很詳細，在此不作詳述。

 

最近使用dataTable處理服務器返回分頁數據時遇到問題，問題解決後有一些心得分享一下：

1. 若是打開界面經過dataTable給表格填充數據，必須把dataTable調用放在document.ready方法裏面，或者放在$(function(){  。。。 });裏面兩者等價。

 

2. 最簡單的使用，服務器按照dataTable要求的分頁結構返回分頁信息，dataTable直接解析並使用

 1 var list = $('#personList').dataTable({  2                     'searching' : false,  3                     'ordering' : false,  4                     "bLengthChange": false,  5                     "iDisplayLength": 10,  6                     "processing": true,  7                     "serverSide": true,  8                     "sServerMethod": "get",  9                     'sAjaxSource' : '/test/listPerson', 10                     'aoColumns' : [ { 11                         'mDataProp' : 'name'
12  }, { 13                         'mDataProp' : 'status'
14  },{ 15                         'mDataProp' : 'position'
16  }, { 17                         'mDataProp' : 'grade'
18  } 19  ] 20                 });

 這種狀況服務器端返回的數據結構必須是：

 1 public class Page{  2         private int sEcho;  3     private int iTotalRecords;  4     private int iTotalDisplayRecords;  5     private int iDisplayStart;  6     private int iDisplayLength;  7     private String sSearch;  8     private List<Object> aaData = new ArrayList<>();  9 
10 }

前臺收到page對象後會解析成dataTable的page對象，取出aaData做爲表數據。

 

3. 咱們如今服務端基本都是有結構化的返回結構體，如：

   {"retCode":"00000", "retInfo":"Success", "data":{"sEcho":1, "iTotalRecords":12,"iTotalDisplayRecords":10,"iDisplayStart":0,"iDisplayLength":10,"sSearch":null, "aaData":[{"name":"lily","satus":"normal","position":"pm"}]}}

   這種數據結構不能直接傳給dataTable處理，沒法識別。咱們須要經過fnServerData對數據進行處理。

    

list = $('#personList').dataTable({ 'searching' : false, 'ordering' : false, "bLengthChange": false, "iDisplayLength": 10, "processing": true, "serverSide": true, "sServerMethod": "get", 'sAjaxSource' : '/test/person/list', 'fnServerData' : function (sSource, aoData, fnCallback) { $.ajax({ "type": "GET", "url": sSource, "dataType": "json", "data": aoData, "success": function (result) { if (result.retCode == "00000") { fnCallback(result.data); } else { alert("Fail to get data!") } } }); }, 'aoColumns' : [ { 'mDataProp' : 'name' }, { 'mDataProp' : 'status' },{ 'mDataProp' : 'position' } ] //$_GET['sColumns']將接收到aoColumns傳遞數據
                });

   

fnServerData主要是在將請求發送到server以前對數據進行處理，在收到server返回後對數據進行處理，方便dataTable填充數據。

'fnServerData' : function (sSource, aoData, fnCallback) 三個參數，sSource會傳入dataTable的sAjaxSource，aoData會傳入dataTable組織好的要發給server的數據，包括分頁信息，若是不把這些數據繼承下來發給服務，分頁的請求信息會丟失，會致使server收到的分頁信息中的iDisplayLength值爲0，將aoData傳入ajax的data屬性以繼承傳遞，fnCallback是dataTable後續處理數據的回調函數，在ajax的success指定的方法中將數據處理（對於咱們上面的返回數據結構，從返回結果中取出data做爲dataTable的接收數據）後的結果傳遞給fnCallback方法。

 

4. 若是在表格繪製完成後須要使用返回的表格數據作其餘操做 

    使用dataTable的fnDrawCallback參數設置處理函數

 1 var list = $('#personList').dataTable({  2                      'searching' : false,  3                      'ordering' : false,  4                      "bLengthChange": false,  5                      "iDisplayLength": 10,  6                      "processing": true,  7                      "serverSide": true,  8                      "sServerMethod": "get",  9                      'sAjaxSource' : '/test/listPerson', 10                      'aoColumns' : [ { 11                          'mDataProp' : 'name'
12  }, { 13                          'mDataProp' : 'status'
14  },{ 15                          'mDataProp' : 'position'
16  }, { 17                          'mDataProp' : 'grade'
18  } 19  ], 20                      'fnDrawCallback': function (result) { 21                                             var json=jQuery.parseJSON(result.jqXHR.responseText); 22                                             /** 使用返回對象 json 的代碼**/23  } 24                  });

    fnDrawCallback的調用不會影響表格數據顯示，由於此時表格已經繪製完成。