分页查询算是比较常用的一个查询了
在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"> 共 ${page.totalRecNum} 条 , 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 , 50 当前显示 ${page.startIndex} - ${page.endIndex} 条 </span> 51 52 53 <span style=" float: right;"> 第 ${page.pageNo}/${page.totalPageNum} 页 54 <c:if test= "${page.pageNo>1}"> 55 <span class= "linkspan" onclick="doQuery(1)" >首页 </span> 56 </c:if> 57 <c:if test= "${page.prePage}"> 58 <span class= "linkspan" onclick="doQuery( ${page.pageNo-1})"> 上一页</span > 59 </c:if> 60 <c:if test= "${page.nextPage}"> 61 <span class= "linkspan" onclick="doQuery( ${page.pageNo+1})"> 下一页</span > 62 </c:if> 63 <c:if test=" ${page.pageNo!=page.totalPageNum}"> 64 <span class= "linkspan" onclick="doQuery( ${page.totalPageNum})"> 末页</span > 65 </c:if> 到 66 <input type="text" id= "pageNo" name ="pageNo" size=4 onkeypress="onlynumber();" /> 67 页 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 }