JQuery的dataTable实现分页

关于dataTable基本使用有很多帖子说的很详细，在此不做详述。

最近使用dataTable处理服务器返回分页数据时遇到问题，问题解决后有一些心得分享一下：

1. 如果打开界面通过dataTable给表格填充数据，必须把dataTable调用放在document.ready方法里面，或者放在$(function(){  。。。 });里面二者等价。

2. 最简单的使用，服务器按照dataTable要求的分页结构返回分页信息，dataTable直接解析并使用

var list = $('#personList').dataTable({
                    'searching' : false,
                    'ordering' : false,
                    "bLengthChange": false,
                    "iDisplayLength": 10,
                    "processing": true,
                    "serverSide": true,
                    "sServerMethod": "get",
                    'sAjaxSource' : '/test/listPerson',
                    'aoColumns' : [ {
                        'mDataProp' : 'name'
                    }, {
                        'mDataProp' : 'status'
                    },{
                        'mDataProp' : 'position'
                    }, {
                        'mDataProp' : 'grade'
                    }
                    ]
                });

 这种情况服务器端返回的数据结构必须是：

public class Page{
        private int sEcho;
    private int iTotalRecords;
    private int iTotalDisplayRecords;
    private int iDisplayStart;
    private int iDisplayLength;
    private String sSearch;
    private List<Object> aaData = new ArrayList<>();

}

前台收到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参数设置处理函数

var list = $('#personList').dataTable({
                     'searching' : false,
                     'ordering' : false,
                     "bLengthChange": false,
                     "iDisplayLength": 10,
                     "processing": true,
                     "serverSide": true,
                     "sServerMethod": "get",
                     'sAjaxSource' : '/test/listPerson',
                     'aoColumns' : [ {
                         'mDataProp' : 'name'
                     }, {
                         'mDataProp' : 'status'
                     },{
                         'mDataProp' : 'position'
                     }, {
                         'mDataProp' : 'grade'
                     }
                     ],
                     'fnDrawCallback': function (result) {
                                            var json=jQuery.parseJSON(result.jqXHR.responseText);
                                            /** 使用返回对象 json 的代码**/23                                         }
                 });

    fnDrawCallback的调用不会影响表格数据显示，因为此时表格已经绘制完成。