整理jquery pagination ajax分页

引入的文件

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部分为后台传过来的全部数据。一次性加载所有数据，当数据比较大的时候，加载就呵呵了。

结果：