最近用網(wǎng)上一些開(kāi)源免費(fèi)的Bootstrap模板做開(kāi)發(fā)的時(shí)候發(fā)現(xiàn)很多模板集成的table插件都用的是jquery的DataTable插件，讀了一下官方文檔發(fā)現(xiàn)不太好理解（估計(jì)是蠢的原因）。想著寫(xiě)篇快速上手的文章供大家參考，發(fā)現(xiàn)好像也沒(méi)太大必要（官方有詳細(xì)文檔，讀起來(lái)需要花點(diǎn)時(shí)間），還是記錄一下開(kāi)發(fā)中遇到的問(wèn)題就算了（方便自己以后忘了回來(lái)看，哈哈）。
先上官方網(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ù)，添加查詢(xún)條件（如：pageNum，pageSize）
DataTable 默認(rèn)發(fā)送參數(shù)里面，分頁(yè)大小是length，沒(méi)有頁(yè)碼，有頁(yè)的開(kāi)始位置（類(lèi)似hibernate里面offSet）start
如果你是使用像Spring提供的分頁(yè)類(lèi)Page的話(huà)，分頁(yè)參數(shù)就是size分頁(yè)大小，page頁(yè)碼，那么默認(rèn)的參數(shù)就不符合你的要求了，這時(shí)候可以類(lèi)似上述例子1中那樣修改請(qǐng)求參數(shù)
$('#tableId').DataTable( {
......
data: function ( d ) {
// 每次reload都會(huì)運(yùn)行此方法
//添加符合你后臺(tái)分頁(yè)要求的參數(shù)
d.size = d.length;
d.page = d.start/d.length;
//添加查詢(xún)條件
//動(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的解釋?zhuān)@里不詳細(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 - 查詢(xún)參數(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);
}
});
}
......
});
有什么問(wèn)題可以一起交流學(xué)習(xí)。賞面的也可以請(qǐng)作者喝杯java，哈哈。
