使用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=)