分页及搜索神器DataTable

分页及搜索神器DataTable

1. 配置环境

Datatables 是一款强大的Jquery表格处理插件，样式方面可以兼容bootstrap3/4、JqueryUi等，也有默认的样式可以选择。使用前在JSP页面中导入以下文件

<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
<script src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>

可以到DataTable官网下载所需文件

2. 使用

本文介绍在前端实现分页及查询，适合数据量比较小（1万条以下的数据），数据量大还是要在后台实现分页，否则影响效率，在前端实现分页及查询功能配置非常简单，在table标签中将后台的数据遍历出来。

<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
	<tr>
		<th class="" style="padding-right: 0px"><input id="selall" type="checkbox" class="icheckbox_square-blue"></th>
		<th class="sorting">访问时间</th>
		<th class="sorting">访问用户</th>
		<th class="sorting">访问IP</th>
		<th class="sorting">资源URL</th>
		<th class="sorting">执行时间</th>
		<th class="sorting">访问方法</th>
	</tr>
</thead>
<tbody>
	<c:forEach items="${sysLogs}" var="syslog">
		<tr>
			<td><input name="ids" type="checkbox"></td>
			<td>${syslog.visitTimeStr }</td>
			<td>${syslog.username }</td>
			<td>${syslog.ip }</td>
			<td>${syslog.url}</td>
			<td>${syslog.executionTime}毫秒</td>
			<td>${syslog.method}</td>										
		</tr>
	</c:forEach>
</tbody>
</table>

---

在JS的入口函数中获取table标签并调用datatable即可，完全使用默认参数就行，如果想弄一些个性化配置，请参考这篇文章DataTable的基本使用或者查阅官网资料

$(function () {
	$("#dataList").DataTable();
});

不喜欢英文的就换成中文的，可以参考我的配置或在官网查阅reference

$("#dataList").DataTable({
	"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
	"language": {
		"search": "查询",
		"lengthMenu": "一页显示 _MENU_ 条记录",
		"zeroRecords": "没有搜索到您要查找的内容",
		"loadingRecords": "请稍等，正在努力的加载",
		// _START_（当前页的第一条的序号） ,_END_（当前页的最后一条的序号）,_TOTAL_（筛选后的总件数）,
		// _MAX_(总件数),_PAGE_(当前页号),_PAGES_（总页数）
		"info": "当前展示第 _START_ 条到第 _END_ 条， 共 _MAX_ 条记录",
		"paginate": {
			"next": "下一页",
			"previous": "上一页"
		}
	}
});