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的調用不會影響表格數據顯示，因為此時表格已經繪制完成。