使用jquery.DataTable.js 展示数据，并进行后台分页。
话不多说，直接上干货。。
要使用jquery.DataTable展现数据，比如引入jquery.js，jquery.DataTable.js，如果这个不会，建议从入门到放弃。
1、使用jquery.DataTable展现数据。
var TableManaged = function () {
var initTable1 = function () {
var table = $('#sample_1');
var searchParams = {};
// begin first table
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ records",
"infoEmpty": "No records found",
"infoFiltered": "(filtered1 from _MAX_ total records)",
"lengthMenu": "Show _MENU_ records",
"search": "Search:",
"zeroRecords": "No matching records found",
"paginate": {
"previous":"Prev",
"next": "Next",
"last": "Last",
"first": "First"
}
},
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables
/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
paging: true,
bFilter:false,
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"lengthMenu": [
[5, 15, 20,25,50],
[5, 15, 20,25,50] // change per page values here
],
// set the initial value
"pageLength": 20,
"serverSide" : true,// 服务器端分页处理
// //当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
"deferRender": true,
// "sAjaxDataProp" : "aData",//是服务器分页的标志，必须有
// "fnServerData": retrieveData,//分页回调函数
ajax: function (data, callback,
settings) {//ajax配置为function,手动调用异步查询
searchParams.pageSize = data.length;
searchParams.pageNum = data.start % data.length === 0 ?
(data.start / data.length+1) :((data.start% data.length) +2);
console.log(requestUrl.baseUrl+requestUrl.queryAlarmInfoList)
$.ajax({
type: "GET",
url: requestUrl.baseUrl+requestUrl.queryAlarmInfoList,
cache: false, //禁用缓存
data: searchParams, //传入已封装的参数
dataType: "json",
success: function (res) {
data.pageNum +=1;
var lists = res.data;
//封装返回数据，这里仅演示了修改属性名
var returnData = {};
returnData.draw =data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = lists.pages;
returnData.recordsFiltered = lists.total;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = lists.list;
//关闭遮罩
//$wrapper.spinModal(false);
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
if(searchParams){
$.extend(searchParams,searchParams);
}
callback(returnData);
},
error: function (
XMLHttpRequest,
textStatus,
errorThrown) {
Toast('查询失败','warning','danger');
}
});
},
columns:[
{"data":"createTime"},
{"data":"equipCode"},
{"data":"pointCode"},
{"data":"value"},
{"data":"ruleName"},
{"data":"windowStart"},
{"data":"windowEnd"},
{"data":"",
"class":"operation",
"render": function(data, type, row) {
return "<a target='_blank' class='map' windowStart='"+row.windowStart+"'
windowEnd='"+row.windowEnd+"' pointCode='"+row.pointCode+"' equipCode='"+row.equipCode+"'>趋势图</a>
<a ruleId = "+row.ruleId+" class='queryDetailInfo'>查看报警规则</a>";
}
}
],
"pagingType": "bootstrap_full_number",
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0]
}, {
"searchable": false,
"targets": [0]
}],
"order": [
[1, "asc"]
] // set first column as a default sort by asc
});
}
return {
//main function to initiate the module
init: function () {
if (!jQuery().dataTable) {
return;
}
initTable1();
// initTable2();
// initTable3();
}
};
}();
paging：true //是否进行分页。
serverSide: false //是否从服务端进行分页。。true则进行后台分页。。false为前端分页。。如果要进行后端分页，则必须
columns：要展示的数据，必须跟后台字段名称一致。。。，如果第一列为checkbox很多同学，就不会，，在此说明一下。。
可以通过render追加样式，以及属性。。columns是表格thead里面，如果要给tbody里面的第一列指定checkbox，则要用到columnsDef属性。。可以对指定列设置是否可以对此列搜索，排序等等等。
columns:[
{"data":"createTime"},
{"data":"equipCode"},
{"data":"pointCode"},
{"data":"value"},
{"data":"ruleName"},
{"data":"windowStart"},
{"data":"windowEnd"},
{"data":"",
"class":"operation",
"render": function(data, type, row) {
return "<a target='_blank' class='map' windowStart='"+row.windowStart+"'
windowEnd='"+row.windowEnd+"' pointCode='"+row.pointCode+"' equipCode='"+row.equipCode+"'>趋势图</a>
<a ruleId = "+row.ruleId+" class='queryDetailInfo'>查看报警规则</a>";
}
}
],
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0]
}, {
"searchable": false,
"targets": [0]
}],
以上基础框架搭建好以后，接着就是请求后台数据了。。
看上面的ajax属性。。。
有几个重要字段，就是returnData里面的属性。。下面说明一下。。
很多人觉得对dataTable的使用没问题，但是数据就是展示不出来。。
1、draw属性，必须跟后台返回的draw一致。。。如果后台没给你，则使用data参数的draw属性。。
2、recordsTotal属性，告诉dataTable总页数
3、recordsFiltered属性，告诉dataTable总记录数。
4、data属性。。数据从哪个字段里面取。。
最重要的是，这些设置好了之后，如何传给dataTable
callback(returnData);
大家注意下最后一点：
我自己写的这个是jquery对象。。如果要使用dataTable对象属性的方法。。需要加上.api()方法。。
就是里面的table.api();
如果改变了搜索内容，不想重新写ajax方法。。
可以使用table.api().ajax.reload()方法。。
另外，默认的搜索参数是dataTable里面的所有列，看起来很恶心。。
可以自定义搜索参数，每次传参用自定义的searchparams
希望对同学们有帮助哦！