java学习之ajax分页查询-----PageBean

1. 准备相应的css和js
   css : kkpage.css
   js : kkpage.js
2. jsp页面引用js和css

<link href="${pageContext.request.contextPath }/css/kkpage.css"
	rel="stylesheet" type="text/css">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/kkpage.js"></script>

3. 条件查询

<table style="width: 1050px;">
				<tr>
					<th colspan="22">查看订单</th>
				</tr>
				<tr>
					<td style="width: 70px">订单编号</td>
					<td><input type="text" name="oid" size="10" id="oid" /></td>
					<td style="width: 70px">收货人姓名</td>
					<td><input type="text" name="shrname" size="10" id="shrname" /></td>
					<td>所在区县</td>
					<td><input type="text" name="hometown" size="10" id="hometown"></td>
					<td>到达站</td>
					<td><select id="eaddress" name="eaddress">
							<option value="-1">请选择</option>
							<c:forEach items="${areas }" var="area">
								<option value="${area.id }">${area.areaname }</option>
							</c:forEach>
					</select></td>
					<td>开始日期</td>
					<td><input name="starttime" type="date" size="12"
						id="starttime"></td>
					<td>结束日期</td>
					<td><input name="endtime" type="date" size="12" id="endtime"></td>
					<td><input type="submit" id="search" value="查询" /> <input
						type="submit" id="myreset" value="重置" /></td>
				</tr>
			</table>

4. 分页显示主体

<table style="width: 1050px;">
				<thead>
					<tr>
						<td>订单编号</td>
						<td>收货人姓名</td>
						<td>收货人电话</td>
						<td>品牌名称</td>
						<td>到达站</td>
						<td>总运费</td>
						<td>总实收</td>
						<td>总差额</td>
						<td>制单人</td>
						<td>制单时间</td>
						<td>审核</td>
						<td colspan="6">操作</td>
					</tr>
				</thead>
				<!-- 动态显示数据到tbody中 -->
				<tbody id="mytbody">
				</tbody>
			</table>
			<!-- 动态生成分页栏 -->
			<div id="kkpager"></div>

5. 分页的js代码

大家在参考的时候只需要根据页面去修改获取的参熟以及动态生成的表格里面的数据。

<script type="text/javascript">
	//分页的js代码
	//第一次进入页面默认显示第一页的数据
	var currentPage = 1;
	//查询  
	function loadData(page) {
		currentPage = page;
		//获取查询的参数
		var oid = $("#oid").val();
		var shrname = $("#shrname").val();
		var eaddress = $("#eaddress").val();
		var hometown = $("#hometown").val();
		var starttime = $("#starttime").val();
		var endtime = $("#endtime").val();
		//异步加载数据 参数的格式为json格式的参数{currentPage:page} 参数的名称currentPage 参数的值page
		//在springmvc中使用Map集合接受参数，还需要注解@RequestParam
		//数据返回的对象名称为data,名称可以自定义，返回的格式有时json
		$.post('${pageContext.request.contextPath}/order_list_ajax',
						{
							currentPage : page,
							oid : oid,
							shrname : shrname,
							eaddress : eaddress,
							starttime : starttime,
							endtime : endtime,
							hometown : hometown
						},
						function(data) {
							//先清除前一步的数据tbody
							$("#mytbody").html("");
							//先清除前一步的分页div
							$("#kkpager").html("");
							//遍历数据 生成动态的数据 附加到tbody里面去 ，data就是我们的分页的实体类PageBean转换后的Map集合,list键就是数据
							if (data.list != null && data.list.length > 0) {
								for (var i = 0; i < data.list.length; i++) {
									//将数据动态的附加到<tbody id="mytbody"></tbody>
									var verify = "";
									if (data.list[i].verify == 0) {
										verify = "未审核";
									}
									if (data.list[i].verify == 1) {
										verify = "已审核";
									}
									$("#mytbody")
											.append(
													"<tr><td>"
															+ data.list[i].oid
															+ "</td>"
															+ "<td>"
															+ data.list[i].shrname
															+ "</td>"
															+ "<td>"
															+ data.list[i].shrtel
															+ "</td>"
															+ "<td>"
															+ data.list[i].goodsbrand
															+ "</td>"
															+ "<td>"
															+ data.list[i].area.areaname
															+ "</td>"
															+ "<td>"
															+ data.list[i].zyunfei
															+ "</td>"
															+ "<td>"
															+ data.list[i].zssyunfei
															+ "</td>"
															+ "<td>"
															+ (data.list[i].zyunfei - data.list[i].zssyunfei)
															+ "</td>"
															+ "<td>"
															+ data.list[i].zdname
															+ "</td>"
															+ "<td>"
															+ data.list[i].odate
															+ "</td>"
															+ "<td>"
															+ verify
															+ "</td>"
															+ "<td><a href='${pageContext.request.contextPath}/orderdetail?oid="
															+ data.list[i].oid
															+ "'>详情</a></td>"
															+ "<td><a href='${pageContext.request.contextPath}/orderdetailprint?oid="
															+ data.list[i].oid
															+ "'>打印</a></td>"
															+ "<td><a href='${pageContext.request.contextPath}/orderdetailpre?oid="
															+ data.list[i].oid
															+ "'>预览</a></td>"
															+ "<td><a href='${pageContext.request.contextPath}/findorder?oid="
															+ data.list[i].oid
															+ "'>修改</a></td>"
															+ "<td><a href='${pageContext.request.contextPath}/deleteorder?oid="
															+ data.list[i].oid
															+ "'>删除</a></td>"
															+ "<td><a href='${pageContext.request.contextPath}/updateverify?oid="
															+ data.list[i].oid
															+ "'>审核</a></td>"
															+ "</tr>");
								}
							}
							//分页脚标 ：data.pageSize每页显示数， data.pageCount总的页数， data.rowCount总的行数
							createPageInfo(page, data.pageSize, data.pageCount,
									data.rowCount, goToPage);
						}, "json");
	}

	function goToPage(n) {
		loadData(n);
	}

	//载入 (默认加载全部) 默认第一次为currentPage为 1

	loadData(currentPage);

	//init
	function createPageInfo(currentPage, pageSize, pageCount, recordCount,
			callbackFunction) {

		var totalPage = pageCount;
		var totalRecords = recordCount;
		var pageNo = currentPage;
		if (!pageNo) {
			pageNo = 1;
		}

		$("#kkpager").html("");

		//生成分页
		//有些参数是可选的，比如lang，若不传有默认值
		kkpager.inited = false;
		kkpager.generPageHtml({
			pno : pageNo,
			//总页码
			total : totalPage,
			mode : 'click',
			//总数据条数
			totalRecords : totalRecords,
			click : function(n) {
				//这里可以做自已的处理
				//处理完后可以手动条用selectPage进行页码选中切换
				callbackFunction(n);
				kkpager.selectPage(n)
			}
		});
	}

	$(function() {
		$("#search").click(function() {
			loadData(currentPage);
		});
	});

	$(function() {
		$("#myreset")
				.click(
						function() {
							location.href = "${pageContext.request.contextPath}/orderlistajaxpage";
						});
	});
	
</script>

6. 数据封装(data.list(查询的主体)，data.pageSize(每页显示条数)，data.rowCount(总记录数)，data.page(当前页码))
   6.1 在这里准备一个PageBean：

package com.oracle.entity;

import java.util.List;

public class PageBean<T> {
	// 当前的页码
	private int page;
	// 总行数
	private int rowCount;// 11
	// 每页显示数
	private int pageSize;// 5
	// 当前页的数据
	private List<T> list;
	// 总的页数
	private int pageCount;// 总的页数=总行数/pagesize 整除10/5 = 2 不整除11/5 + 1 = 3

	public int getPage() {
		return page;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public int getRowCount() {
		return rowCount;
	}

	public void setRowCount(int rowCount) {
		this.rowCount = rowCount;
	}

	public int getPageSize() {
		return pageSize;
	}

	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}

	public List<T> getList() {
		return list;
	}

	public void setList(List<T> list) {
		this.list = list;
	}

	public int getPageCount() {
		return pageCount;
	}

	public void setPageCount(int pageCount) {
		this.pageCount = pageCount;
	}
}

6.2 service封装所有查询的数据整合到PageBean

public PageBean<Order> findOrderByConditions(int page, int pageSize, String oid, String shrname, String hometown,
			Integer eaddress, String starttime, String endtime) {
		List<Order> orders = orderDao.findOrderByConditions(page, pageSize, oid, shrname, hometown, eaddress, starttime,
				endtime);//查询符合条件的数据封装到集合
		PageBean<Order> pb = new PageBean<>();//实例化PageBean
		pb.setList(orders);//封装orders集合
		pb.setPageSize(pageSize);//封装每页显示条数
		int rowCount = orderDao.getRowCount(oid, shrname, hometown, eaddress, starttime, endtime);//查询符合条件的总记录数
		pb.setRowCount(rowCount);//封装总记录数
		pb.setPage(page);//封装当前页面
		if (rowCount % pageSize == 0) {
			pb.setPageCount(rowCount / pageSize);//封装总页码
		} else {
			pb.setPageCount(rowCount / pageSize + 1);
		}
		return pb;
	}

(ps:本文内容仅供参考)