分页查询

分页查询算是比较常用的一个查询了
在DAO层主要是查两个数据
第一个总条数
第二个要查询起始记录数到查询的条数
 
当第一次点击查询时候(非下一页时
Page类里面预设的就是 index就是0 pageSize是预设值
 
当点击下一页的时候 index 和 pageSize带的就是页面上面给的值了
 
分页的页面一般的构造是

一般的页面的样式是
上面是查询条件 下面是查询结果 再下面就是分页的内容了
 
-------------------------------------------------
查询条件1                     查询条件2          
查询条件3                     查询条件4         
                                        点击查询 
-------------------------------------------------
属性一   属性二   属性三   属性四   属性五   属性六
记录1    ......   ......   .....   ......   ...... 
记录2    ......   ......   .....   ......   ...... 
.....    ......   ......   .....   ......   ......
-------------------------------------------------
共n条数据 每页显示m条 当前x-y调    第x/y页，跳  页
-------------------------------------------------
 
 
无论是点击上面的查询，还是下面的下一页，都是触发javascript函数，将from提交
所以from里面有两个隐藏的input
存放页号和页面大小
<input name= "page.pageNo"  id ="iPageNo" value= "1" type="hidden" />
<input name="page.pageSize"  id= "iPageSize" value=" ${page.pageSize}" type= "hidden" />
 
使用的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 }
 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xy2401/p/3113535.html