使用jquery的datatables插件渲染表格元件時，最佳的方法如下：
- 全局定義dataTables對象變量；
- 頁面加載時初始化dataTables對象；
- 查詢時，使用dataTables對象的api加載資料；
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%@ include file="common.jsp" %>
<script type="text/javascript" src="<%=basePath %>js/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/datatables.min.css" />
</head>
<body>
<div class="text-c" style="padding:9px;height:auto;" align="left">
<button name="" id="" class="btn btn-success" type="submit" onclick="gridSearch();">查詢</button>
</div>
<div style="width:98%" id="tb1">
<table id="dataTableTest" class="table table-border table-bordered table-bg table-hover table-striped table-responsive">
<thead>
<tr class="text-c">
<th>
<div style="width:75px">測試1</div>
</th>
<th>
<div style="width:75px">測試2</div>
</th>
<th>
<div style="width:75px">測試3</div>
</th>
</tr>
</thead>
</table>
</div>
<br />
<div style="width:98%" id="tb2">
<table id="dataTableTest1" class="table table-border table-bordered table-bg table-sort table-responsive">
<thead>
<tr class="text-c">
<th>
<div style="width:75px">a1</div>
</th>
<th>
<div style="width:75px">a2</div>
</th>
<th>
<div style="width:75px">a3</div>
</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<br>
<br>
</body>
<script>
var dataTable,dataTable1;
$(function () {
//初始化dataTables對象
dataTable = $("#dataTableTest").DataTable({
bFilter: false, //是否啟動過濾、搜尋功能
bLengthChange: false,//是否顯示一個每頁長度的選擇條（需要分頁器支援）
bSort: false,//是否啟動各個字段的排序功能
bPaginate: false,//是否顯示（應用）分頁器
bInfo: false,//是否顯示頁腳資訊，DataTables插件左下角顯示記錄數
stripeClasses: ["table-striped", "even"],// 為奇偶行加上樣式，相容不支援CSS僞類的場合
destroy: true,//解決Cannot reinitialise DataTable
columns: [
{ "data": "rpage", "defaultContent": "", "width": "50%" },
{ "data": "cnt", "defaultContent": "", "width": "20%" },
{ "data": "stime", "defaultContent": "", "width": "30%" }
]
});
dataTable1 = $("#dataTableTest1").DataTable({
processing: true,
bFilter: false, //是否啟動過濾、搜尋功能
bSort: false,//是否啟動各個字段的排序功能
bPaginate: true,//是否顯示（應用）分頁器
iDisplayLength: 500,
bLengthChange: false,//是否顯示一個每頁長度的選擇條（需要分頁器支援）
bInfo: false,//是否顯示頁腳資訊，DataTables插件左下角顯示記錄數
destroy: true,
columns: [{ "data": "rpage" },
{ "data": "recSource" },
{ "data": "contentid" },
{ "data": "name" },
{ "data": "itemType" },
{ "data": "channel" },
{ "data": "uploadId" },
{ "data": "category" },
{ "data": "tag" },
{ "data": "stime" },
{ "data": "r_eventid", "visible": false }],
rowCallback: function (row, aData, index) {
$(row).css('background', rowcolourall[aData.colourid]);
}
});
});
function gridSearch() {
var uid = $("#uid").val();
if (uid == "") {
$.messager.alert('錯誤', '請輸入正确的uid!', 'error');
return;
} else {
var fid = $("#fid").val();
var t1 = $("#t1").val();
var t2 = $("#t2").val();
//drawTableTest不分頁
var totalUrl = '<%=basePath %>/tm/gridQuery?type=1&uid=' + uid + '&fids=' + fid + '&t1=' + t1 + '&t2=' + t2;
$.doAjax({
async: false,
url: totalUrl,
callback: function (_data) {
//alert(_data.msg);
dataTable.clear();
if (_data.code == 'V00000') {
dataTable.rows.add(_data.data).draw();
} else {
$.messager.alert('提示', _data.msg || '系統故障!', 'error');
dataTable.draw();
return;
}
}
});
//drawTableTese1：分頁表格
var bg = $("#checkbox-bg").is(":checked");
if (bg) {
var url2 = '<%=basePath %>/tm/gridQueryPaging?type=2&uid=' + uid + '&fids=' + fid + '&t1=' + t1 + '&t2=' + t2;
var pageinfo = dataTable1.page.info();
//var pageinfo = $('#dataTableTest1').DataTable().page.info();
var param = {};
param.startIndex = pageinfo.start;//起始位置
param.pageSize = pageinfo.length;//一頁大小
param.page = (pageinfo.start / pageinfo.length) + 1;//目前頁碼
$.doAjax({
async: true,
data: param,
url: url2,
maskLoad: true,
callback: function (_data) {
dataTable1.clear();
if (_data.code == 'V00000') {
var len = _data.data.pageData.length;
var resData = _data.data;
var returnData = {};
returnData.draw = resData.draw;
returnData.recordsTotal = resData.total;
returnData.recordsFiltered = resData.total;//背景不實作過濾功能，每次查詢均視作全部結果
//returnData.data = resData.pageData;
returnData.data = [];
for (var i = 0; i < resData.pageData.length; i++) {
var dat = {};
var rpage = resData.pageData[i].rpage + "<br><button id=\"event\">RequestId</button>";
dat.rpage = (resData.pageData[i].rpage != null) ? rpage : "";
dat.recSource = (resData.pageData[i].recSource != null) ? resData.pageData[i].recSource : "";
dat.contentid = (resData.pageData[i].contentid != null) ? resData.pageData[i].contentid : "";
returnData.data.push(dat);
}
for (var i = 0; i < returnData.data.length; i++) {
dataTable1.row.add(returnData.data[i]);
}
} else {
$.messager.alert('提示', _data.msg || '系統故障!', 'error');
return;
}
dataTable1.draw();
}
});
} else {
$('#dataTableTest1').DataTable().clear().draw();
}
}
}
</script>
</html> ![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)