使用jquery中的dataTables实现列表的分页
dataTables是⼀个jquery的插件,可以进行分页和实时查找数据。
官⽹:https://datatables.net/
1.引入
(1)jquery.js (本地引⼊,CDN)
(2)dataTables(本地引⼊,CDN)
官方提供的CDN:
//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js
使用CDN引用的一个好处:许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。
2.对数据表格进⾏初始化
datatables可以支持不同的数据源,我们角色列表是对已经加载好数据的表格进⾏分页处理
主要对表格进行操作,表格代码展示
<div class="compete_list">
<table id="sample-table-1" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
<th width="150">角色编号</th>
<th width="300">角色名称</th>
<th class="hidden-480">角色描述</th>
<th class="hidden-480">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${roleList}" var="role">
<tr>
<td class="center"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
<td>${role.roleId}</td>
<td>${role.roleName}</td>
<td>${role.roleDesc}</td>
<td>
<a title="编辑" onclick="role_modify('560')" href="javascript:;" class="btn btn-xs btn-info"><i
class="fa fa-edit bigger-120"></i></a>
<a title="删除" href="javascript:;" onclick="role_del(this,'1')" class="btn btn-xs btn-warning"><i
class="fa fa-trash bigger-120"></i></a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
下面这个语句就是实现分页和查询,排序的关键
查询:输入框输入查询内容查询出该表中所有包含查询关键字的行
<script type="text/javascript">
$("#sample-table-1").DataTable({});
</script>
- 分页效果
2.查询效果