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