背景
用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的配置项,这里对了基本就可以完成了