JQuery DataTable 1.10服务端分页实现

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值