Datatables後臺服務器端分頁、根據條件從新查詢、主要技術問題

首先是表格配置，很是重要的是，其中有一個配置項「fnServerData：」你是哪裏也查不到的，只在吾輩前端中口口相傳（也多是插件之類？），配置它的回調函數即可以實現分頁：

 1       $('#alarmList').DataTable( {
 2            "sDom": "<'exportOptions'T><'table-responsive't><'row'<p i>>",
 3            "bDestory": true,
 4            "scrollCollapse": true,
 5            "oLanguage": {//國際化配置
 6                "sLengthMenu": "顯示 _MENU_ 條",
 7                "sInfo": "當前數據爲從第從 <b>_START_ 到 _END_</b>條記錄 總記錄數爲_TOTAL_條",
 8                "sSearch" : "搜索",
 9                "sZeroRecords" : "沒有符合條件的數據",
10                "sProcessing" : "正在獲取數據，請稍後...",
11                "sInfoEmpty" : "顯示第 0 至 0 項結果，共 0 項",
12                "sInfoFiltered" : "(所有記錄數 _TOTAL_ 條)",
13                "sUrl" : "",
14                "oPaginate": {
15                     "sFirst" : "第一頁",
16                     "sPrevious" : "上一頁",
17                     "sNext" : "下一頁",
18                    "sLast" : "最後一頁"
19                }
20 
21            },
22            "iDisplayLength": 10,
23            "bSort": true, //是否啓動各個字段的排序功能
24            "bAutoWidth": false, //是否自適應寬度
25            "bServerSide": true, //是否啓動服務器端數據導入
26            "sAjaxSource": '',
27            "fnServerData": retrieveData,//分頁回調函數
28            "sPaginationType": 'full_numbers',
29            "oTableTools": {
30                sSwfPath: "assets/plugins/jquery-datatable/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
31                aButtons: [{
32                    sExtends: "csv",
33                    sButtonText: "<i class='pg-grid'></i>",
34                }, {
35                    sExtends: "xls",
36                    sButtonText: "<i class='fa fa-file-excel-o'></i>",
37                }, {
38                    sExtends: "pdf",
39                    sButtonText: "<i class='fa fa-file-pdf-o'></i>",
40                }]
41            },
42            "fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {
43                 return sPre;
44             },
45            "fnDrawCallback": function(oSettings) {
46                $('.export-options-container').append($('.exportOptions'));
47 
48                $('#ToolTables_tableWithExportOptions_0').tooltip({
49                    title: 'Export as CSV',
50                    container: 'body'
51                });
52 
53                $('#ToolTables_tableWithExportOptions_1').tooltip({
54                    title: 'Export as Excel',
55                    container: 'body'
56                });
57 
58                $('#ToolTables_tableWithExportOptions_2').tooltip({
59                    title: 'Export as PDF',
60                    container: 'body'
61                });
62            },
63            "columns": [
64                {
65                   data: "id",
66                   render: function (data, type, row, meta) {
67                       if(data){
68                            return '<input type="checkbox" name="checklist" data-id="' + data + '" value="' + data + '" />';
69                       }
70                   }
71                },//多選框 綁定設備id
72                {
73                   data: "level",
74                   render: function (data, type, row, meta) {
75                       return "<img src='" + data + "' />";
76                   }
77                },//級別
78                {
79                   data: "state",
80                   render: function (data, type, row, meta) {
81                       return "<img src='" + data + "' />";
82                   }
83                 },//狀態
84                { data: "eventType" },//事件類型
85                { data: "happenTime" },//發生時間
86                { data: "describe"}//描述
87            ]
88        } );

而後是回調函數，最坑的來了，返回的數據對象中必須包含data,recordsTotal,recordsFiltered這3項，每一個項目的後臺返回的json格式不一樣，那可能你就須要再組裝一遍啦

 1     function retrieveData(sSource, aoData, fnCallback) {
 2       // console.log(aoData);
 3           /**
 4            * [http配置項]
 5            * @type {Object}
 6            */
 7           var config =  {
 8             "method":"post",
 9             //"url":"/nms/assets/js/api/event/historicalEvents.json",
10             "url":requrl("/nms/assets/js/api/event/historicalEvents.do"),
11             "params":{
12               'deviceType':$scope.equType,
13               'type':$scope.eventType,
14               'device':$scope.equ,
15               'state':$scope.eventState.selected.code,
16               'level':$scope.eventLevel.selected.code,
17               'startTime':$('#reportrange span').html().split(' ~ ')[0],
18               'endTime':$('#reportrange span').html().split(' ~ ')[1],
19               'limit':10,//每頁顯示最多10條數據
20               'start':aoData[3].value,//數據起始序號
21               'page':(aoData[3].value/10)+1 //頁數
22             }
23           };
24           console.log(config);//此處查看參數的更改
25           promiseHttpService.mock(config).then(function (data) {//封裝的http服務
26                 console.log(data);
27                 var ndata = {};//返回的數據須要固定格式，不然datatables沒法解析，因此須要從新組裝
28                 ndata.data = data.data.dataList;
29                 // data.draw = draw;
30                 ndata.recordsTotal = data.data.total;//返回數據所有記錄，對象屬性爲固定格式不可更改，影響表格信息顯示
31                 ndata.recordsFiltered = ndata.recordsTotal;//後臺不實現過濾功能，每次查詢均視做所有結果，對象屬性爲固定格式不可更改，影響表格信息顯示
32                 console.log(ndata);
33                 fnCallback(ndata); //服務器端返回的對象的returnObject部分是要求的格式
34             });
35       }

以上是顯示部分，那麼若是想點擊按鈕，從新組織參數進行查詢該怎麼作呢？我剛開始覺得也須要從新給表格賦值，實際上有更好的方法：

1       $scope.queryBtn = function(){
2         $('#alarmList').dataTable().fnDraw();
3       }

沒錯這一行就能夠了，.dataTable().fnDraw()刷新Datatable，會自動激發retrieveData函數