Datatables后台服務器端分頁、根據條件重新查詢、主要技術問題

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

      $('#alarmList').DataTable( {
           "sDom": "<'exportOptions'T><'table-responsive't><'row'<p i>>",
           "bDestory": true,
           "scrollCollapse": true,
           "oLanguage": {//國際化配置
               "sLengthMenu": "顯示 _MENU_ 條",
               "sInfo": "當前數據為從第從 <b>_START_ 到 _END_</b>條記錄 總記錄數為_TOTAL_條",
               "sSearch" : "搜索",
               "sZeroRecords" : "沒有符合條件的數據",
               "sProcessing" : "正在獲取數據，請稍后...",
               "sInfoEmpty" : "顯示第 0 至 0 項結果，共 0 項",
               "sInfoFiltered" : "(全部記錄數 _TOTAL_ 條)",
               "sUrl" : "",
               "oPaginate": {
                    "sFirst" : "第一頁",
                    "sPrevious" : "上一頁",
                    "sNext" : "下一頁",
                   "sLast" : "最后一頁"
               }

           },
           "iDisplayLength": 10,
           "bSort": true, //是否啟動各個字段的排序功能
           "bAutoWidth": false, //是否自適應寬度
           "bServerSide": true, //是否啟動服務器端數據導入
           "sAjaxSource": '',
           "fnServerData": retrieveData,//分頁回調函數
           "sPaginationType": 'full_numbers',
           "oTableTools": {
               sSwfPath: "assets/plugins/jquery-datatable/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
               aButtons: [{
                   sExtends: "csv",
                   sButtonText: "<i class='pg-grid'></i>",
               }, {
                   sExtends: "xls",
                   sButtonText: "<i class='fa fa-file-excel-o'></i>",
               }, {
                   sExtends: "pdf",
                   sButtonText: "<i class='fa fa-file-pdf-o'></i>",
               }]
           },
           "fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {
                return sPre;
            },
           "fnDrawCallback": function(oSettings) {
               $('.export-options-container').append($('.exportOptions'));

               $('#ToolTables_tableWithExportOptions_0').tooltip({
                   title: 'Export as CSV',
                   container: 'body'
               });

               $('#ToolTables_tableWithExportOptions_1').tooltip({
                   title: 'Export as Excel',
                   container: 'body'
               });

               $('#ToolTables_tableWithExportOptions_2').tooltip({
                   title: 'Export as PDF',
                   container: 'body'
               });
           },
           "columns": [
               {
                  data: "id",
                  render: function (data, type, row, meta) {
                      if(data){
                           return '<input type="checkbox" name="checklist" data-id="' + data + '" value="' + data + '" />';
                      }
                  }
               },//多選框 綁定設備id
               {
                  data: "level",
                  render: function (data, type, row, meta) {
                      return "<img src='" + data + "' />";
                  }
               },//級別
               {
                  data: "state",
                  render: function (data, type, row, meta) {
                      return "<img src='" + data + "' />";
                  }
                },//狀態
               { data: "eventType" },//事件類型
               { data: "happenTime" },//發生時間
               { data: "describe"}//描述
           ]
       } );

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

    function retrieveData(sSource, aoData, fnCallback) {
      // console.log(aoData);
          /**
           * [http配置項]
           * @type {Object}
           */
          var config =  {
            "method":"post",
            //"url":"/nms/assets/js/api/event/historicalEvents.json",
            "url":requrl("/nms/assets/js/api/event/historicalEvents.do"),
            "params":{
              'deviceType':$scope.equType,
              'type':$scope.eventType,
              'device':$scope.equ,
              'state':$scope.eventState.selected.code,
              'level':$scope.eventLevel.selected.code,
              'startTime':$('#reportrange span').html().split(' ~ ')[0],
              'endTime':$('#reportrange span').html().split(' ~ ')[1],
              'limit':10,//每頁顯示最多10條數據
              'start':aoData[3].value,//數據起始序號
              'page':(aoData[3].value/10)+1 //頁數
            }
          };
          console.log(config);//此處查看參數的更改
          promiseHttpService.mock(config).then(function (data) {//封裝的http服務
                console.log(data);
                var ndata = {};//返回的數據需要固定格式，否則datatables無法解析，所以需要重新組裝
                ndata.data = data.data.dataList;
                // data.draw = draw;
                ndata.recordsTotal = data.data.total;//返回數據全部記錄，對象屬性為固定格式不可更改，影響表格信息顯示
                ndata.recordsFiltered = ndata.recordsTotal;//后台不實現過濾功能，每次查詢均視作全部結果，對象屬性為固定格式不可更改，影響表格信息顯示
                console.log(ndata);
                fnCallback(ndata); //服務器端返回的對象的returnObject部分是要求的格式
            });
      }

以上是顯示部分，那么如果想點擊按鈕，重新組織參數進行查詢該怎么做呢？我剛開始以為也需要重新給表格賦值，實際上有更好的方法：

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

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