现在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是分页长度;