Datatables入坑指南01:
今天尝试将datatables从客户端分页转化为服务器端分页,根据官网要求我返回了相应的相应参数,具体如下:
但是客户端总是显示不了相应的json数据,最后终于发现了原因:
具体的实现代码如下:
var datatables = function() {
$('#tableData').DataTable({
//开启服务器模式
"processing": true,
"serverSide": true,
"paging": true,
"ajax": {
"url": "http://localhost:8080/gmws/system/payDataList",
"type": "POST",
"data": function (d) {
//删除多余请求参数
for(var key in d){
if(key.indexOf("columns")==0||key.indexOf("order")==0||key.indexOf("search")==0){ //以columns开头的参数删除
delete d[key];
}
}
var searchParams= {
page: d.start == 0 ? 1 : (d.start/d.length + 1),
rows: d.length,
sTime: sTime,
eTime: eTime,
key: searchkey
};
//附加查询参数
if(searchParams){
$.extend(d,searchParams); //给d扩展参数
}
},
"dataType" : "json",
"dataFilter": function (response) {//json是服务器端返回的数据
//这一句很关键,否则后面数据返回不了,虽然服务器端返回的也是json数据
response = JSON.parse(response);
if (response == null || response == "") {
alert("服务器繁忙!!!")
} else {
var returnData = {};
returnData.draw = response.result.draw;
returnData.recordsTotal = response.result.recordsTotal;//返回数据全部记录
returnData.recordsFiltered = response.result.recordsFiltered;//后台不实现过滤功能,每次查询均视作全部结果
returnData.data = response.result.data;//返回的数据列表*/
return JSON.stringify(returnData);//这几个参数都是datatable需要的,必须要
}
},
//这么写列细节不可以,下面才行
/*"columns": [
{ "data": "machine_position" },
{ "data": "position_id" },
{ "data": "machine_count" },
{ "data": "create_time" },
{ "data": "total_income" },
{ "data": "number_of_transactions" }
],*/
},
"columnDefs" : [
{
targets : 0,
data : "machine_position",
title: "地址",
}, {
targets : 1,
"data" : "position_id",
title: "地址编号",
}, {
targets : 2,
"data" : "machine_count",
title: "机器总数",
}, {
targets : 3,
"data" : "total_income",
title: "总收入",
}, {
targets : 4,
"data" : "number_of_transactions",
title: "交易笔数",
}, {
targets : 5,
"data" : "create_time",
title: "成交时间",
} ],
"searching" : false,
/* dom: 'Bfltip',
buttons: [
{
extend: 'excel',//使用 excel扩展
text: '导出本页',// 显示文字
filename:"data",//文件名
className: "excelButton",
exportOptions: {
//自定义导出选项
//如:可自定义导出那些列,那些行
//TODO...
}
}
],*/
"language" : {
"processing" : "处理中...",
"lengthMenu" : "显示 _MENU_ 项结果",
"zeroRecords" : "没有匹配结果",
"info" : "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"infoEmpty" : "显示第 0 至 0 项结果,共 0 项",
"infoFiltered" : "(由 _MAX_ 项结果过滤)",
"infoPostFix" : "",
"search" : "搜索:",
"url" : "",
"emptyTable" : "没有数据",
"loadingRecords" : "载入中...",
"infoThousands" : "20",
"paginate" : {
"first" : "首页",
"previous" : "上页",
"next" : "下页",
"last" : "末页"
}
}
});
controller:
封装实体类:
这里是我参考的博文链接:
https://blog.csdn.net/qing_gee/article/details/82285030