JQuery DataTable 1.10服务端分页实现
来源:互联网 发布:批量转换pdf软件 编辑:程序博客网 时间:2024/06/07 03:32
现在JQuery DataTable最新版的是1.10版,然而已经网上最多是的1.9版或者之前的,最新版的内容比较少,由于英文不好,前端的经验也不是很多,经过一段的摸索,大体上实现了查询,分页等功能;
基本情况时,前端用metronic,后台用是Java+SpringMVC
前后台交互使用Json。
根据实际的业务情况,我需要在Table中展显海运货代的运价
所以有一个Java类
public class EPrice { private Integer id; private String polEn; private String polCn; private String portarea; private String potEn; private String potCn; private String podEn; private String podCn; private Double price20Gp; private Double price40Gp; private Double price40Hq; ....}
定义了一个返回类
public class HtResponse { //返回给前台的代码 private String code; //返回给前台的信息 private String msg; //访问成功标志 private Boolean success; private String rowCount; //这是datatable分页是总记录数的关键字 //这个很重要 private String recordsTotal; private String recordsFiltered; private String draw; private List<Object> data = new ArrayList<Object>(); public List<Object> getData() { return data; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public Boolean getSuccess() { return success; } public void setSuccess(Boolean success) { this.success = success; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public String getRowCount() { return rowCount; } public void setRowCount(String rowCount) { this.rowCount = rowCount; } public String getRecordsTotal() { return recordsTotal; } public void setRecordsTotal(String recordsTotal) { this.recordsTotal = recordsTotal; } public String getRecordsFiltered() { return recordsFiltered; } public void setRecordsFiltered(String recordsFiltered) { this.recordsFiltered = recordsFiltered; } public String getDraw() { return draw; } public void setDraw(String draw) { this.draw = draw; }}
后台的Controller通过SpringMVC的ModelAndView作为对像返回
这里贴一下前端的代码
var oTable = 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": "没有数据", "info": "显示 _START_ - _END_ 共 _TOTAL_ 行", "infoEmpty": "没有找对应的记录", "infoFiltered": "(filtered1 from _MAX_ total entries)", "lengthMenu": "每页显示 _MENU_ 行", "search": "查询:", "zeroRecords": "没有相应的行" }, 'bFilter': false, //开启服务端分页 "serverSide": true, //进度条 "processing": true, "ajax": { 'url':'/fob/app/price/getPrice?_mt=json',//请求路径 'type':'POST', /** * DataTable 默认关键字 是data * 我这里后台返回是price * 但是由于如果后台只返回一条记录是不是数组[] * 所以需要重新判断一下,所以可以用function */ 'dataSrc':function(jsonData){ if(jsonData.code=="SUCCESS"){ var prices=jsonData.price; var rel=[]; var data=[]; if(prices!=null ){ if(prices.length>1){ for(var i=0;i<prices.length;i++){ data[data.length]=prices[i]; } return data; } else{ data[data.length]=prices; return data; } } else { return {"data":[]}; } } else{ return {"data":[]}; } }, error:function(){ var data = { "data" : [] }; return data; } }, "columns": [ /* { "className": '', "orderable": false, "data": null, "defaultContent": '<span class="row-details row-details-close"></span>' },*/ { "data": null}, { "data": "custName" }, { "data": "mdporten" }, { "data": "qyporten", "visible": false }, { "data": "shipen" }, { "data": "lineName" }, { "data": "shipdate" }, { "data": "price20"}, { "data": "price40" }, { "data": "price40hq" }, { "data": "price45" }, { "data": null} ], "columnDefs": [{ "orderable": false, "targets": [0] }, { "targets":[0], "render":function(data,type,full){ return "<span class=\"row-details row-details-close\"></span>"; } }, { "targets":[7], "render":function(data,type,full){ return Number(full.price20)+Number(full.addprice20); } }, { "targets":[8], "render":function(data,type,full){ return Number(full.price40)+Number(full.addprice40); } }, { "targets":[9], "render":function(data,type,full){ return Number(full.price40hq)+Number(full.addprice40hq); } }, { "targets": [11], // 目标列位置,下标从0开始 "data": "salary", // 数据列名 "render": function(data, type, full) { // 返回自定义内容 return "<a class=\"edit\" href=\"javascript:TableAdvanced.edit('"+full.QYPortEN+"');\">Edit</a>"; } }, { "targets": [12], // 目标列位置,下标从0开始 "data": "salary", // 数据列名 "render": function(data, type, full) { // 返回自定义内容 return "<a id=\"tableDelBtn_"+full.pol+"\"class=\"delete\" href=\"javascript:TableAdvanced.show('"+full.QYPortEN+"');\">Delete</a>"; } }], "order": [ [1, 'asc'] ], "lengthMenu": [ [5, 15, 20, -1], [5, 15, 20, "All"] // change per page values here ], // set the initial value "pageLength": 20 });
特别要注意
根据以往的经验,一般前端往后端,传送pageIndex和pageSize用于分页。在DataTable是传start与length,start是起始行,length是分页长度;
0 0
- JQuery DataTable 1.10服务端分页实现
- jquery datatable服务端分页
- springmvc + jquery datatable + ajax实现服务端动态分页查询
- springmvc + jquery datatable + ajax实现服务端动态分页查询
- datatable服务端分页配置
- dataTable 服务端分页请求
- jQuery插件 dataTable Ajax分页功能实现
- 实现jquery DataTable前后台动态分页
- 使用datatable进行服务端分页
- jquery datatable分页配置
- jQuery Datatable后台分页
- jQuery datatable 分页
- jquery datatable客户端分页
- Jquery.dataTable 分页表格
- jquery datatable分页
- springmvc + jquery datatable + ajax实现动态分页查询
- springmvc + jquery datatable + ajax实现动态分页查询
- php/js 用JQuery.Datatable 实现数据的分页加载
- BIOS与EFI对比
- leetcode 229:Majority Element II
- Sip响应状态码功能对照详解
- Porting openwrt on MT7688 Log
- thrift
- JQuery DataTable 1.10服务端分页实现
- 利用mkstemp创建程序退出后不会被删除的临时文件
- 内部接口
- Makefile中常用的函数
- 函数指针数组
- 【Android】 从头搭建视频播放器(2)——SystemMediaPlayerImpl
- java获取相对时间 1小时前 1天前
- 关与RVDS2.2仿真时AXD的configure target 里面是空的问题解决
- USB驱动——USB配置