最近用网上一些开源免费的Bootstrap模板做开发的时候发现很多模板集成的table插件都用的是jquery的DataTable插件，读了一下官方文档发现不太好理解（估计是蠢的原因）。想着写篇快速上手的文章供大家参考，发现好像也没太大必要（官方有详细文档，读起来需要花点时间），还是记录一下开发中遇到的问题就算了（方便自己以后忘了回来看，哈哈）。
先上官方网站&中文网
1. 指定返回json中数据源data& recordsTotal & recordsFiltered
DataTable 要求服务器返回的json里面必须含有特定的字段名（具体看文档），但是你后台返回的字段名跟它不对应，那就可以在option中的ajax中的dataSrc中配置，下面是参考代码
$('#tableId').DataTable( {
......
ajax: {
......
dataSrc: function(json) {
json.recordsTotal = json.totalElements;
json.recordsFiltered = json.totalElements;
//必须返回是dataSrc数据！！！
return json.content;
}
}
......
});
2. 修改请求参数，添加查询条件（如：pageNum，pageSize）
DataTable 默认发送参数里面，分页大小是length，没有页码，有页的开始位置（类似hibernate里面offSet）start
如果你是使用像Spring提供的分页类Page的话，分页参数就是size分页大小，page页码，那么默认的参数就不符合你的要求了，这时候可以类似上述例子1中那样修改请求参数
$('#tableId').DataTable( {
......
data: function ( d ) {
// 每次reload都会运行此方法
//添加符合你后台分页要求的参数
d.size = d.length;
d.page = d.start/d.length;
//添加查询条件
//动态的form条件<form id="form-params">......</form>
var params = $('#form-params').serializeArray();
for (var i=0;i<params.length;i++) {
d[params[i].name] = params[i].value;
}
}
......
});
3. 自定义工具栏
最好事先读dom的解释，这里不详细解释
$('#tableId').DataTable( {
......
//定义DataTable的Dom构成
dom: '<"toolbar">frtip'
......
});
//拼接按钮
$("div.toolbar").html('<button type="button" onclick="alert (\'button click\')"> ');
4. 自定义ajax function
$('#tableId').DataTable( {
......
//定义ajax function
//data - 查询参数
//callback - datatable回调函数callback(data),必须运行才能显示数据
//settings - datatable设置
ajax: function(data, callback, settings) {
// paga param
data.size = data.length;
data.page = data.start/data.length;
//query params
var params = $('#form-params').serializeArray();
for (var i=0;i<params.length;i++) {
data[params[i].name] = params[i].value;
}
//sort params
var columns = data.columns;
var orders = data.order;
var sort = '';
for (var i=0;i<orders.length;i++) {
var order = orders[i];
sort += sort==''?'':'&';
sort += 'sort='+columns[order.column].data+','+order.dir;
}
$.ajax({
url : ctx + "/dc/taskLog/doQuery.action?"+sort,
type: 'get',
data : data,
dataType:'json',
success: function(data) {
data.recordsTotal = data.totalElements;
data.recordsFiltered = data.totalElements;
data.data = data.content;
callback(data);
}
});
}
......
});
有什么问题可以一起交流学习。赏面的也可以请作者喝杯java，哈哈。
