datatables服务器端分页

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值