Datatable.js后台分页的前台实现

背景

用bootstrap＋jq做web页面，都是老东西了但是对新手比较友好，当时学习时间有限，被坑完之后来记录一下
参考了https://blog.csdn.net/H5_QueenStyle12/article/details/79784554的文章，很有收获

直接贴相关代码

服务器端分页.

var concentrated_list =[];
var concentrated_dataset = [];
//制表
$('#concentrated_data-table').DataTable(
        {
            columnDefs: [{
                "defaultContent": "",
                "targets": "_all",
                "width": "300px"
            }],
            "bSort" : false, //取消排序
            //"data": concentrated_dataset,
            //"oLanguage": dataTableLanguageOption().zh,
            "processing": true,//显示加载
            "serverSide":true,//服务器端分页,需要开启
            "destroy":true,//解决重新渲染问题
            //这里的ajax分为两个部分 一个入参为data,callback的函数(有的博客里写的需要setting这个参数，其实没用到),
            //以及获取后台数据的ajax,这个ajax需要用callback方法来重新渲染表格
            "ajax":function (data,callback) {
                var param = {};
                param.startIndex = data.start;//起始位置
                param.pageSize = data.length;//一页大小
                param.pageNum = (data.start / data.length)+1;//当前页码
                $.ajax({
                    type: "GET",
                    url: "list",
                    timeout: 50000,
                    data:param,//这里传的数据一般需要当前页码和一页大小就够了 看后端需求
                    dataType: "json",
                    success: function (data) {
                        //console.log(data.success);
                        switch (data.error_code) {
                            default:
                                $.notify({
                            title: '错误！', message: data.msg
                        }, {
                            type: 'danger', allow_dismiss: true, newest_on_top: true
                        });
                                break;
                            case 0:
                                concentrated_list = data.data.orders;
                                concentrated_dataset = [];
                                //重构json数据包
                                for (i = 0; i < concentrated_list.length; i++) {
                                    concentrated_dataset[i] = new Array();
                                    concentrated_dataset[i][0] = concentrated_list[i].orderName;
                                    concentrated_dataset[i][1] = concentrated_list[i].exeTime;

                                    concentrated_dataset[i][2] = concentrated_list[i].electricityValue;
                                    concentrated_dataset[i][3] = concentrated_list[i].price;
                                    switch (concentrated_list[i].status) {
                                        case 0:
                                            concentrated_dataset[i][4] = "已保存";
                                            concentrated_dataset[i].push(saved_form);
                                            break;
                                        case 1:
                                            concentrated_dataset[i][4] = "已提交";
                                            concentrated_dataset[i].push(submited_form);
                                            break;
                                        case 2:
                                            concentrated_dataset[i][4] = "审核通过";
                                            concentrated_dataset[i].push(passed_form);
                                            break;
                                        case 3:
                                            concentrated_dataset[i][4] = "审核未通过";
                                            concentrated_dataset[i].push(unpassed_form);
                                            break;
                                        case 4:
                                            concentrated_dataset[i][4] = "部分匹配";
                                            concentrated_dataset[i].push(part_match);
                                            break;
                                        case 5:
                                            concentrated_dataset[i][4] = "完全匹配";
                                            concentrated_dataset[i].push(successful_match);
                                            break;
                                        case 6:
                                            concentrated_dataset[i][4] = "匹配失败";
                                            concentrated_dataset[i].push(failed_match);
                                    }
                                }
                                var returnData = {};//重点是这里
                                returnData.draw = data.draw;
                                returnData.recordsTotal = 2;//总的记录页数 需要从后端取得
                                returnData.recordsFiltered = 14;//总的记录条数 需要从后端取得
                                returnData.data = concentrated_dataset;//需要渲染的数据
                                callback(returnData);//用callback方法重新渲染表格
                        }
                    }
                });
            },
            "columns": [
                {title: "名称","className": "m-w-30","render": function ( data, type, full, meta ) {
                        return '<a class="btn btn-link" style="display: inline" href="/concentrated/concentrated_check#'+data+'">' + data + '</a>';
                    }  },
                {title: "执行时间","className": "m-w-180","render": function ( data ) {
                        return ChangeTime(data);
                    }  },
                {title: "交易电量","className": "m-w-30"},
                {title: "交易报价","className": "m-w-30"},
                {title: "订单状态","className": "m-w-80"},
                {title: "操作","className": "m-w-80"}
            ]
});

说明

重要的地方都用注释写出来了，其他地方可以不用管了，几个月前写的，现在倒回去看感觉写的很屎。。。
主要是callback的用法以及datatable的配置项，这里对了基本就可以完成了