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的调用不会影响表格数据显示，由于此时表格已经绘制完成。