转载:
首先是表格配置,非常重要的是,其中有一个配置项“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函数