在Web前端处理时分页的处理

客户需求是通过模糊查询得到查询结果的列表并且能够分页显示在网页中。首先我们要了解分页查询的方法，是在数据库中通过like来进行模糊查询，把结果放在一个结果集里，再通过servlet把结果取出来，放在jsp中显示。首先关于每页显示的内容，包括起始记录和结束记录，页码数，下一页和上一页的变量的值放在一个类中，然后在servlet中调用这个类的属性就可以得到每页的记录。这个类的内容如下：

package com.jerei.util;
import java.util.List;
public class PageUtitily<T> {

public int getTotalRecords() {
return totalRecords;
}

public int getTotalPages() {
return totalPages;
}
private List<T> records; 

private int curPage=1;    //当前页码
private int totalRecords; //符合条件的总记录数
private int totalPages;//总页码数
private int pageSize =3;//页面大小
private int nextPage ;//下一页
private int prePage;       //上一页

private int startRecord;
private int endRecord;

public PageUtitily(int pageNo){
this.curPage = pageNo;
this.startRecord = (this.curPage-1)*pageSize+1;
this.endRecord = this.curPage*pageSize;

this.prePage = this.curPage-1;
if(this.prePage<=0){
this.prePage=1;
}
}


public void setTotalRecords(int totalRecords) {
this.totalRecords = totalRecords;
//计算总页码
this.totalPages=this.totalRecords%pageSize==0?this.totalRecords/this.pageSize:this.totalRecords/this.pageSize+1;

//计算下一页
this.nextPage=this.curPage+1;
if(this.nextPage>totalPages){
this.nextPage=totalPages;
}
}
public List<T> getRecords() {
return records;
}

public void setRecords(List<T> records) {
this.records = records;
}

public int getPageSize() {
return pageSize;
}

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

public int getCurPage() {
return curPage;
}

public int getNextPage() {
return nextPage;
}

public int getPrePage() {
return prePage;
}

public int getStartRecord() {
return startRecord;
}

public int getEndRecord() {
return endRecord;
}


}

然后在dao里实现对数据库的模糊查询，得到相应的结果集：

public int findCusOrdersByConditionToatalCount(Condition condition){
String select = "SELECT O.CUSNO, O.ORDADDRESS, O.ORDRECEIVER, "
+ " TO_CHAR(O.ORDDATE, 'YYYY-MM-DD') ORDERDATE "
+ " FROM CUSORDER O, CUSINFO C " + " WHERE O.CUSNO = C.CUSNO";
StringBuilder sb = new StringBuilder(select);

List<Object> params = new ArrayList<Object>();
if (condition != null) {
if (condition.getCusName() != null
&& !"".equals(condition.getCusName())) {
//select += " AND C.CUSNAME LIKE ?";
sb.append(" AND C.CUSNAME LIKE ?");
params.add("%"+condition.getCusName()+"%");
}
if (condition.getOrderAddress() != null
&& !"".equals(condition.getOrderAddress())) {
//select+= " AND O.ORDADDRESS LIKE ?";
sb.append(" AND O.ORDADDRESS LIKE ?");
params.add("%"+condition.getOrderAddress()+"%");
}
if (condition.getOrderReceiver() != null
&& !"".equals(condition.getOrderReceiver())) {
//select+=" AND O.ORDRECEIVER LIKE ?";
sb.append(" AND O.ORDRECEIVER LIKE ?");
params.add("%"+condition.getOrderReceiver()+"%");
}
if (condition.getStime() != null
&& !"".equals(condition.getStime())){
//select+=" AND O.ORDERDATE >= TO_DATE(?, 'YYYY-MM-DD')";
sb.append(" AND O.ORDDATE >= TO_DATE(?, 'YYYY-MM-DD')");
params.add(condition.getStime());
}
if (condition.getEtime() != null
&& !"".equals(condition.getEtime())){

//select+=" AND O.ORDERDATE <=TO_DATE(?, 'YYYY-MM-DD')";
sb.append(" AND O.ORDDATE <=TO_DATE(?, 'YYYY-MM-DD')");
params.add(condition.getEtime());
}
}
return this.executeQueryForTatalCount(sb.toString(), params);
}
}

在业务层只需对dao里的方法进行调用即可，返回给servlet具体某一页的内容：

public PageUtitily<CusOrder> findCusOrdersByConditionForPage(Condition condition,int pageNo){
PageUtitily<CusOrder> pageObj = new PageUtitily<CusOrder>(pageNo);
pageObj.setTotalRecords(dao.findCusOrdersByConditionToatalCount(condition));
List<CusOrder> list = dao.findCusOrdersByCondition(condition, pageObj);
pageObj.setRecords(list);
return pageObj;
}

在servlet中获得前端页面的元素并得到查询的页码，调用业务层的方法，得到相应页码的内容，并存储在JSON 中，以供前端页面来调用：

protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//读取客户端传递过了的查询条件
String cusName = req.getParameter("cusname");
String receiver = req.getParameter("receiver");
String cusaddress =req.getParameter("cusaddress");
String stime = req.getParameter("stime");
String etime = req.getParameter("etime");

//获取页码
String curPage = req.getParameter("pageNo");
if(curPage==null || "".equals(curPage)){
curPage="1";
}

//封装查询条件对象
Condition condition = new Condition();
condition.setCusName(cusName);
condition.setOrderAddress(cusaddress);
condition.setOrderReceiver(receiver);
condition.setStime(stime);
condition.setEtime(etime);

//调用业务层方法完成查询
CusOrderService service = new CusOrderService();
//List<CusOrder> list= service.findCusOrdersByCondition(condition);
PageUtitily<CusOrder> page = service.findCusOrdersByConditionForPage(condition, Integer.valueOf(curPage));
//向页面输出json格式的查询结果，用于ajax

JSONObject obj = JSONObject.fromObject(page);
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
out.print(obj.toString());
out.close();

在jsp页面，只需得到查询框中的值，传递到servlet层，并把查询出来的结果返回到页面，显示到相应的页面中，并计算出上一页和下一页的页码数，以供翻页查询，这里用到JSON存储结果更方便，不用页面跳转，简单明了：

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(function(){
$("#query").click(function(){
//第一个参数，请求地址
//第二个参数，向后台传递的数据
//第三个参数，回调函数，函数参数为后台发回的数据
//第四个参数，返回数据的格式
var url = '<%=request.getContextPath()%>/orderServlet.do';
$.post(url,
{
cusname:$("#cusname").val(),
receiver:$("#receiver").val(),
cusaddress:$("#cusaddress").val(),
stime:$("#stime").val(),
etime:$("#etime").val()
},
function(data){
$("tr[id^='order']").remove();
$("#prePage").val(data.prePage);
$("#nextPage").val(data.nextPage);
$("#total").html(data.totalPages);

$.each(data.records,function(i,d){
var rows="<tr id='order'"+i+">";
   rows+="<td>"+d.cusNo+"</td>";
   rows+="<td>"+d.orderAddress+"</td>";
   rows+="<td>"+d.orderDate+"</td>";
   rows+="<td>"+d.orderReceiver+"</td>";
   rows+="</tr>";
   
   $("#show").append(rows);
})
},
"json");

});
$("#pre").click(function(){
var url = '<%=request.getContextPath()%>/orderServlet.do';
$.post(url,
{
cusname:$("#cusname").val(),
receiver:$("#receiver").val(),
cusaddress:$("#cusaddress").val(),
stime:$("#stime").val(),
etime:$("#etime").val(),
pageNo:$("#prePage").val()
},
function(data){
$("tr[id^='order']").remove();
$("#prePage").val(data.prePage);
$("#nextPage").val(data.nextPage);
$("#total").html(data.totalRecords);
$.each(data.records,function(i,d){
var rows="<tr id='order'"+i+">";
   rows+="<td>"+d.cusNo+"</td>";
   rows+="<td>"+d.orderAddress+"</td>";
   rows+="<td>"+d.orderDate+"</td>";
   rows+="<td>"+d.orderReceiver+"</td>";
   rows+="</tr>";
   
   $("#show").append(rows);
})
},
"json");
});
$("#next").click(function(){
var url = '<%=request.getContextPath()%>/orderServlet.do';
$.post(url,
{
cusname:$("#cusname").val(),
receiver:$("#receiver").val(),
cusaddress:$("#cusaddress").val(),
stime:$("#stime").val(),
etime:$("#etime").val(),
pageNo:$("#nextPage").val()
},
function(data){
$("tr[id^='order']").remove();
$("#prePage").val(data.prePage);
$("#nextPage").val(data.nextPage);
$("#total").html(data.totalRecords);
$.each(data.records,function(i,d){
var rows="<tr id='order'"+i+">";
   rows+="<td>"+d.cusNo+"</td>";
   rows+="<td>"+d.orderAddress+"</td>";
   rows+="<td>"+d.orderDate+"</td>";
   rows+="<td>"+d.orderReceiver+"</td>";
   rows+="</tr>";
   
   $("#show").append(rows);
})
},
"json");
});
});
</script>
</head>
<body>
<div>
<div>
<table>
<tr>
<input type="hidden" id="prePage">
<input type="hidden" id="nextPage">

<td>客户名称：</td>
<td>
<input type="text" id="cusname" name="cusname">
</td>
<td>接收人：</td>
<td>
<input type="text" id="receiver" name="receiver">
</td>
</tr>
<tr>
<td>接收地址：</td>
<td colspan="3">
<input type="text" name="cusaddress" id="cusaddress">
</td>

</tr>
<tr>
<td>开始日期：</td>
<td>
<input type="date" name="stime" id="stime">
</td>
<td>结束日期：</td>
<td>
<input type="date" name="etime" id="etime">
</td>
</tr>
<tr>
<td>
<input type="button" id="query" value="查询"> 
<input type="button" id="pre" value="上一页"> 
<input type="button" id="next" value="下一页"> 
   <span id="total"></span>
</td>
</tr>
</table>
</div>
   <div>
    <table id="show">
    <tr >
    <td>客户编号</td>
    <td>接收地址</td>
    <td>订单日期</td>
    <td>接收人</td>
    </tr>
       
    </table>
   </div>
</div>
</body>
</html>