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函数