引入的文件
html代码
<div id="tablewrapper">
<div id="Searchresult">
<table id="listTable" class="table table-striped">
<thead>
<tr>
<th>id</th>
<th>书名</th>
<th>ISBN</th>
<th>作者</th>
<th>进货价格</th>
<th>销售价格</th>
<th>出版商</th>
<th>供应商</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="Pagination" class="pagination">
<!-- 这里显示分页 -->
</div>
<div id="hiddenresult" style="display:none;">
<!-- 列表元素 -->
<table id="listTable" class="table table-striped">
<tbody>
<c:forEach items="${books}" var="current" varStatus="i">
<tr class="show1">
<td>${current.id}</td>
<td>${current.name}</td>
<td>${current.isbn }</td>
<td>${current.author }</td>
<td>${current.inPrice }</td>
<td>${current.outPrice }</td>
<td>${current.publisher }</td>
<td>${current.provider.name }</td>
<td nowrap="nowrap" class="tabletd"><a title="查看"
href="${pageContext.request.contextPath}/selectBook?idKey=${current.id}&">查看</a>
<a title="编辑"
href="${pageContext.request.contextPath}/editBook?idKey=${current.id}&">编辑</a>
<a title="删除"
href="${pageContext.request.contextPath}/deleteBook?idKey=${current.id}&">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
注意这里的三个id
Searchresult、Pagination、hiddenresult
分别对应的是查询结果(页面上显示的数据)、分页(点击上一页、下一页的地方)、隐藏的结果(后台返回的全部数据)
js代码:
$(function(){
var num_entries = $("#hiddenresult .show1").length;//这里获取所有数据的条数
var initPagination = function() {
// 创建分页
$("#Pagination").pagination(num_entries, {
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
callback: pageselectCallback,//回调函数
items_per_page:2 //每页显示2项
});
}();
function pageselectCallback(page_index, jq){
// 从表单获取每页的显示的列表项数目
var items_per_page = 2;
var max_elem = Math.min((page_index+1) * items_per_page, num_entries);//当前页的最大数据
$("#Searchresult table tbody").empty();//将显示结果的地方清空
// 获取加载元素
for(var i=page_index*items_per_page;i<max_elem;i++){
var new_content = $("#hiddenresult .show1:eq("+i+")").clone();
$("#Searchresult table tbody").append(new_content); //装载对应分页的内容
}
//阻止单击事件
return false;
}
});
基本上就是这样的操作。
hiddenresult部分为后台传过来的全部数据。一次性加载所有数据,当数据比较大的时候,加载就呵呵了。
结果: