datatables CDN链接地址：
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js"></script>
1.datatables初始化
开发中许多页面都需要datatables，很多设置都是重复的，所以对其默认值做了统一设置。
默认值设置：
//默认错误模式是alert出异常信息，非常不友好，改成none后将不显示alert窗口
$.fn.dataTable.ext.errMode = 'none';
// 覆盖默认设置
$.extend($.fn.dataTable.defaults, {
paging : true, // 分页
lengthChange : false, // 长度
searching : false, // 是否显示默认搜索
info : true, // 是否显示列表信息
autoWidth : true, // 是否自动宽度
processing : true, // 是否显示'处理中'
serverSide : true, // 是否是服务端处理
ordering : true, // 是否支持排序
ajax : {
dataSrc : 'list', // 重置返回的JSON消息数据头，datatables默认是'data'
type : 'POST', // 默认是post提交
data : function(data) {
// 自动获得form 表单的数据，并设置到data中提交查询
var arrayInput = $("form :input");
if (arrayInput != undefined && arrayInput.length > 0) {
for (var i = 0; i < arrayInput.length; i++) {
data[arrayInput[i].id] = arrayInput[i].value;
}
}
// 获得orderby条件，设置到orderby中提交查询
var orderBy = '';
for (var i = 0; i < data.order.length; i++) {
order = data.order[i];
column = data.columns[order.column];
orderBy += ',' + column.data + " " + order.dir;
}
if (orderBy != '') {
orderBy = orderBy.substr(1);
}
data.orderBy = orderBy;
// 删除内置的列信息，排序信息，搜索信息
// 不删除会全部提交到后台，数据量很大
delete (data.columns);
delete (data.order);
delete (data.search);
}
},
language : {
decimal : "",
emptyTable : "查无数据",
info : "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
infoEmpty : "当前显示第 0 至 0 项，共 0 项",
infoFiltered : "(由 _MAX_ 项结果过滤)",
infoPostFix : "",
thousands : ",",
lengthMenu : "每页 _MENU_ 项",
loadingRecords : "载入中...",
processing : "处理中...",
search : "搜索:",
zeroRecords : "没有匹配结果",
paginate : {
"first" : "首页",
"previous" : "上页",
"next" : "下页",
"last" : "末页"
},
aria : {
"sortAscending" : ": 以升序排列此列",
"sortDescending" : ": 以降序排列此列"
}
},
drawCallback : function() {
// 表格绘画完成后，自动添加第一个行“序号”列
var api = this.api();
var startIndex = api.context[0]._iDisplayStart;
var columns = api.context[0].aoColumns;
var columnIndex = -1;
for (var i = 0; i < columns.length; i++) {
if (columns[i].title == '序号') {
columnIndex = i;
break;
}
}
if (columnIndex != -1) {
api.column(columnIndex).nodes().each(function(cell, i) {
cell.innerHTML = startIndex + i + 1;
});
}
}
});
调用：
// 初始化表格
function initTable() {
var i = -1;
table = $('#dataTable').DataTable(
{
ajax : {
url : prefix + "/list2/"
},
columnDefs : [
{
targets : ++i,
title : '',
data : null,
render : function(data, type, row, meta) {
var result = '<input type="checkbox" value="'
+ row.dictID + '" />';
return result;
},
orderable : false
}, {
//默认值设置JS中会判断此列是否存在
title : "序号",
"searchable" : false,
"orderable" : false,
"targets" : ++i,
data : null,
}, {
title : "字典ID",
"searchable" : false,
"orderable" : false,
"targets" : ++i,
data : "dictID",
}, {
title : "数据字典名称",
"searchable" : false,
"orderable" : true,
"targets" : ++i,
data : "dictName",
}, {
title : "数据字典值",
"searchable" : false,
"orderable" : true,
"targets" : ++i,
data : "dictValue",
}],
order : [ [ 5, 'asc' ] ]
});
}
2.即时搜索
我的列表原来没有即时搜索效果，后来考虑把搜索条件做统一获得和提交，不要在各自的JS中每次提交。
就给搜索表单加一个id,且名字为search。这个时候发现就产生了即时搜索的效果，只要表单获得焦点或有输入。
列表就会自动带上条件查询。
3.刷新表格，保持在当前页
ajax.reload(null, false); //刷新后还保持在当前页面
ajax.reload(); //刷新后自动到第一页
官方链接：https://datatables.net/reference/api/ajax.reload()
4.列隐藏
通过列属性：className
示例代码：
columnDefs : [
{
targets : ++i,
title : '',
data : null,
orderable : false,
className : $('isValid').val() == '2' ? ''
: 'hidden',
render : function(data, type, row, meta) {
var result = '<input type="checkbox" value="'
+ row.detailID + '" />';
return result;
}
}, {
title : "序号",
"searchable" : false,
"orderable" : false,
"targets" : ++i,
data : null,
}]
5.销毁table
table.destroy(); // table是datatable的实例变量
$('#dataTable').empty(); // 清空table的html，这一步必须要有，否则会清除不干净