Datatable的ajax请求方式+常见设置
2018-04-17 本文已影响0人
IT和金融
在用Datatable进行前端表格的展示的,需要大量的ajax请求,在实际过程中有些字段返回允许为空,同时有些字段需要进行解析后展示,故主要的几种方式如下:
页面增加table
<table class="table table-striped table-bordered table-hover" id="dataTablesDevice">
<thead></thead><tbody></tbody>
</table>
js代码中:
var tableDevice = $('#dataTablesDevice').DataTable({
"bProcessing" : true,
"sAjaxSource" : "/smoke/getSmokeList",
"sServerMethod" : "get", //或者post
"sScrollX" : '100%', //手机页面自适应
"columns" : [
{"data" : "alias",title : "别名"},
{"data" : "company",title : "组织",defaultContent:"","render": function ( data, type, row ) {
return orgValue[data]; //数组方式返回
}},
{"data" : "deviceId",title : "设备ID",defaultContent:""}, //允许为空的写法
{"data" : function(obj) { //函数方式的处理
if (obj.status == '1') {
return "设备开机";
} else {
return obj.status;
} },title : "当前状态"},
{"data" : function(obj) {
return new Date(obj.createTime).toLocaleString(); //本地时间的转换
},title : "更新时间"}
],
"columnDefs": [
{ "targets": -1, "render": function (data, type, row, meta) {
return '<button class="btn btn-success btn-sm" onclick="userGetCenter(' + meta.row + ')">GIS 中心点</button>}
}
] //增加各位列
});