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