最近用網(wǎng)上一些開源免費(fèi)的Bootstrap模板做開發(fā)的時(shí)候發(fā)現(xiàn)很多模板集成的table插件都用的是jquery的DataTable插件沮峡，讀了一下官方文檔發(fā)現(xiàn)不太好理解（估計(jì)是蠢的原因）恩掷。想著寫篇快速上手的文章供大家參考衷快，發(fā)現(xiàn)好像也沒太大必要（官方有詳細(xì)文檔，讀起來需要花點(diǎn)時(shí)間），還是記錄一下開發(fā)中遇到的問題就算了（方便自己以后忘了回來看黔攒，哈哈）。
先上官方網(wǎng)站&中文網(wǎng)
1. 指定返回json中數(shù)據(jù)源data& recordsTotal & recordsFiltered
DataTable 要求服務(wù)器返回的json里面必須含有特定的字段名（具體看文檔）旅掂，但是你后臺(tái)返回的字段名跟它不對(duì)應(yīng)赏胚，那就可以在option中的ajax中的dataSrc中配置，下面是參考代碼
$('#tableId').DataTable( {
......
ajax: {
......
dataSrc: function(json) {
json.recordsTotal = json.totalElements;
json.recordsFiltered = json.totalElements;
//必須返回是dataSrc數(shù)據(jù)Ｉ膛啊＞踉摹！
return json.content;
}
}
......
});
2. 修改請(qǐng)求參數(shù)秘车，添加查詢條件（如：pageNum典勇，pageSize）
DataTable 默認(rèn)發(fā)送參數(shù)里面，分頁大小是length叮趴，沒有頁碼割笙，有頁的開始位置（類似hibernate里面offSet）start
如果你是使用像Spring提供的分頁類Page的話，分頁參數(shù)就是size分頁大小眯亦，page頁碼伤溉，那么默認(rèn)的參數(shù)就不符合你的要求了般码，這時(shí)候可以類似上述例子1中那樣修改請(qǐng)求參數(shù)
$('#tableId').DataTable( {
......
data: function ( d ) {
// 每次reload都會(huì)運(yùn)行此方法
//添加符合你后臺(tái)分頁要求的參數(shù)
d.size = d.length;
d.page = d.start/d.length;
//添加查詢條件
//動(dòng)態(tài)的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的解釋，這里不詳細(xì)解釋
$('#tableId').DataTable( {
......
//定義DataTable的Dom構(gòu)成
dom: '<"toolbar">frtip'
......
});
//拼接按鈕
$("div.toolbar").html('<button type="button" onclick="alert (\'button click\')"> ');
4. 自定義ajax function
$('#tableId').DataTable( {
......
//定義ajax function
//data - 查詢參數(shù)
//callback - datatable回調(diào)函數(shù)callback(data),必須運(yùn)行才能顯示數(shù)據(jù)
//settings - datatable設(shè)置
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);
}
});
}
......
});
有什么問題可以一起交流學(xué)習(xí)谈火。賞面的也可以請(qǐng)作者喝杯java侈询，哈哈。
