这篇文章的目的,是记录使用插件的经历,遇到的问题及解决。有些是测试同学测出来的,有些是产品提的需求。这个插件的文章会写两篇,第一篇是表格使用,第二篇增加CURD功能,官方这一块支持的也不错
插件链接
搭建
<table id="example" class="display" cellspacing="0" width="100%">
$("#table").DataTable({
"columns": [{
data: "table_id",
orderable: false
},],
"order": [],
"language": {
"zeroRecords": "无数据",
"info": "当前_PAGE_页,第_START_到_END_条,共 _TOTAL_条记录",
"infoEmpty": "无数据",
"infoFiltered": "",
"infoPostFix": "",
"paginate": {
"next": "下一页",
"previous": "上一页"
}
},
"dom": "tip",
"ajax": function (data, callback) {
var requireData = {
data: [],
recordsTotal: 0,
recordsFiltered: 0}
callback(requireData);
}
})
数据来源
- 第一种直接写在html页面,使用tr标签,
- 第二种在初始化时,将数据塞到data(平行于ajax字段)字段里面,不推荐使用,便不给例子了,可以去官方找
- 第三种就像上面的代码,定义ajax字段,使用回调函数。
- 推荐使用第三种,两个理由,第一,刷新表格数据只有在定义ajax字段时,才能使用;第二,ajax字段支持分页;需要注意的是,data字段和ajax字段不能同时存在,表格只能由一个数据源
重新加载数据
- 页面肯定是需要刷新的,但dataTable不支持二次初始化,刷新数据应当使用下面的方法
$('#table').DataTable().table.ajax.reload();
- 对于通过查询框出来的表格,我一般定义某个标志位,来表示表格是否已经初始化,如果已经初始化,便重新加载数据。
分页
- ajax是一个方法,预设的参数有两个,其中data参数用于分页,data.start和data.length对应sql语句中的limit a,b两个参数,或者说是起始数和长度;callback是回调函数,填充表格数据。官方起始还提供了error等函数,我偷懒,将后台失败的情况,预先定义成了无数据,这也就是事先定义requireData对象的原因
"ajax": function (data, callback) {
var requireData = {};
requireData.recordsTotal = 0;
requireData.recordsFiltered = 0;
requireData.data = [];
var param = {
operator_type: $("#operator_type").val(),
start_time: $("#start_time").val(),
end_time: $("#end_time").val(),
start: data.start,
length: data.length,
};
var total = getAjax("/log/service/total", param, false)
$.ajax({
async: false,
type: 'get',
data: param,
url: "/log/service/query",
dataType: "json",
success: function (json) {
requireData.data =json;
requireData.recordsTotal = total;
requireData.recordsFiltered = total;
}
})
callback(requireData);
}
着色
- 有时需要将一些列颜色设置为醒目的颜色,比如红色,dataTables也支持,操作比较方便
"fnRowCallback" : function(nRow, aData) {
if (aData[2] == "报警") {
$('td', nRow).css({
"background-color" : "#e10000",
"color" : "#fff"
});
} else {
$('td', nRow).css({
"background-color" : "#F9F9F9",
});
}
},
效果图