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