分页查询

分页查询算是比较常用的一个查询了

在DAO层主要是查两个数据

第一个总条数

第二个要查询起始记录数到查询的条数

当第一次点击查询时候(非下一页时

Page类里面预设的就是 index就是0 pageSize是预设值

当点击下一页的时候 index 和 pageSize带的就是页面上面给的值了

分页的页面一般的构造是

一般的页面的样式是

上面是查询条件下面是查询结果再下面就是分页的内容了

-------------------------------------------------

查询条件1 查询条件2

查询条件3 查询条件4

点击查询

-------------------------------------------------

属性一属性二属性三属性四属性五属性六

记录1 ...... ...... ..... ...... ......

记录2 ...... ...... ..... ...... ......

..... ...... ...... ..... ...... ......

-------------------------------------------------

共n条数据每页显示m条当前x-y调第x/y页，跳页

-------------------------------------------------

无论是点击上面的查询，还是下面的下一页，都是触发javascript函数，将from提交

所以from里面有两个隐藏的input

存放页号和页面大小

使用的Page 类

最重要的几个个属性

总条数，页的大小，当前页号

页面数据集合Collection

像其它属性都是可以根据这几个来计算的

记录开始位置，记录结束位置

Page类

 1 public class Page {
 2    
 3     private Integer pageNo ;    // 当前页号
 4     private Integer pageSize ;  // 每页记录条数
 5     private Boolean nextPage ;  // 是否有下一页
 6     private Boolean prePage ;   // 是否有上一页
 7     private int totalRecNum ;  // 总共有多少条记录
 8     private Integer totalPageNum ;//总共多少页
 9     private Collection pageContent ; // 该页的数据 (记录明细)
10     private Integer startIndex ; // 记录开始位置
11     private Integer endIndex ;   // 记录结束位置
12       
13      public Page () {
14           super();
15         pageNo =1;
16         pageSize =20;
17      }
18    
19      public Integer getPageNo () {
20           return pageNo;
21      }
22      public void setPageNo (Integer pageNo) {
23           this.pageNo = pageNo;
24      }
25      public Integer getPageSize () {
26           return pageSize;
27      }
28      public void setPageSize (Integer pageSize) {
29           this.pageSize = pageSize;
30      }
31    
32      public Boolean getNextPage () {
33           return pageNo<getTotalPageNum()?true:false;
34      }
35 
36      public Boolean getPrePage () {
37           return pageNo>1?true:false;
38      }
39 
40      public int getTotalRecNum () {
41           return totalRecNum;
42      }
43      public void setTotalRecNum (int totalRecNum ) {
44           this.totalRecNum = totalRecNum;
45      }
46    
47      public Integer getTotalPageNum () {
48           return totalRecNum%pageSize>0?(int )(totalRecNum/pageSize+1 ):(int)( totalRecNum/pageSize );
49      }
50 
51      public Collection getPageContent () {
52           return pageContent;
53      }
54    
55      public void setPageContent (Collection pageContent) {
56           this.pageContent = pageContent;
57      }
58   
59      public int getStartIndex ()
60      {
61           return pageSize*(pageNo-1 )+1;   // size:10 pageno:3   21
62      }
63   
64      public int getEndIndex ()
65      {
66           return ( pageSize*pageNo >this.totalRecNum)? (int)( this.totalRecNum ):(pageSize*pageNo);
67      }
68   
69 }

包含的分页页面

 1 <%@ page language="java"   pageEncoding="UTF-8" %>
 2 <%@taglib uri= "http://java.sun.com/jsp/jstl/core" prefix="c" %>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://" +request.getServerName()+":"+request.getServerPort()+path+ "/";
 6 %>
 7 
 8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 9 <html>
10   <head >
11     <base href="<%= basePath%> ">
12    
13     <title >My JSP 'pageFloor.jsp' starting page</title>
14    
15     <meta http-equiv="pragma" content= "no-cache">
16     <meta http-equiv="cache-control" content="no-cache" >
17     <meta http-equiv="expires" content= "0">   
18     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" >
19     <meta http-equiv="description" content= "This is my page">
20     <style type="text/css">
21       .linkspan{
22         text-decoration:none ;
23         cursor: pointer;
24        }
25        /* 设置分页的样式,使其不受全部的样式更改,而导致不统一 */
26        .paging{
27          font-size: 12px ;
28        }
29        /* table里面无数据的时候,下面的分页栏会和talbe的标题th挨的太紧
30               导致不美观,所以在table和分页栏总结加一个分割线HR */
31        .tbHR{
32           height: 1px;
33           border: none;
34           border-top: 1px dashed #CCCCCC ;
35         }
36     </style >
37   </head >
38  
39   <body >
40   <hr class="tbHR">
41   <div class="paging">
42     <span id="pageinfo"> 共&nbsp; ${page.totalRecNum}&nbsp;条 &nbsp;,&nbsp;
43     
44     每页显示 <select id= "pageSize" onchange="changePageSize(value)" >
45                    <option value= "5" ${page.pageSize==5 ? "selected":"" }>5</ option><option value="10" ${page.pageSize==10 ? "selected":"" }> 10</ option>
46                    <option value= "20" ${page.pageSize==20 ? "selected":"" }>20</ option><option value="30" ${page.pageSize==30 ? "selected":"" }> 30</ option>
47                    <option value= "50" ${page.pageSize==50 ? "selected":"" } >50 </option>
48             </select> 条
49     &nbsp;,&nbsp;
50     当前显示 &nbsp;${page.startIndex}&nbsp; -&nbsp; ${page.endIndex}&nbsp;条 </span>
51     
52          
53     <span style=" float: right;"> 第&nbsp; ${page.pageNo}/${page.totalPageNum}&nbsp;页 &nbsp;&nbsp;
54          <c:if test= "${page.pageNo>1}">
55              <span class= "linkspan" onclick="doQuery(1)" >首页 </span> &nbsp;&nbsp;
56          </c:if>
57           <c:if test= "${page.prePage}">
58               <span class= "linkspan"  onclick="doQuery( ${page.pageNo-1})"> 上一页</span >&nbsp;&nbsp;
59          </c:if>
60           <c:if test= "${page.nextPage}">
61              <span class= "linkspan" onclick="doQuery( ${page.pageNo+1})"> 下一页</span >&nbsp;&nbsp;
62          </c:if>
63           <c:if test=" ${page.pageNo!=page.totalPageNum}">
64               <span class= "linkspan" onclick="doQuery( ${page.totalPageNum})"> 末页</span >&nbsp;&nbsp;
65          </c:if>    到&nbsp;&nbsp;
66       <input type="text" id= "pageNo" name ="pageNo" size=4    onkeypress="onlynumber();" />
67                            &nbsp;&nbsp;页&nbsp;&nbsp;
68        <span class="linkspan" onclick="doQuery(document.getElementById('pageNo').value)" >跳转 </span>
69     </span >
70    </div >
71   </body >
72 </html>

Javascript 函数

这里还有一个问题，点击查询的时候，注意要设置页号为1，不然是带之前的页号，就会导致用户是一个新的查询，到的页面确实后几页这里为处理

 1 function doQuery(pageno){
 2 
 3   if( isNaN( pageno ) ){
 4       alert( "请输入数字" );
 5       ${ 'pageNo'} .select();        
 6        return;
 7     }
 8       
 9      if(pageno<1 || pageno>${page.totalPageNum} ){
10         alert( "页号"+pageno+"超出范围，有效范围:[1-${page.totalPageNum}]!" );
11         ${ 'pageNo' }.select();
12         return;
13      }
14      document.getElementById('iPageNo' ).value=pageno;
15      document.getElementById('iPageSize' ).value=document.getElementById('pageSize').value;
16     
17      var f=document.forms[0];
18       f.submit();
19 }
20 function changePageSize(value){
21      
22     var exdate=new Date(); //获得当天时间
23      exdate.setDate(exdate.getDate()+365); //当天时间+365天
24 
25      //设置cookie,这里是设置用户设置的Page的长度 
26      document.cookie="queryEmployeePageSize=" +value+";expires=" +exdate.toGMTString();
27       
28      document.getElementById('iPageSize' ).value=value;
29      document.forms[0].submit();
30 }