需求:
每页列表下都有一个分页的功能,显示总数量、当前页/总页数、首页、上一页、下一页、最后一页、GO到第几页
效果动态图:
实现思路:
因为每个列表页都需要,在每个出列表页数据的servlet中都要求出总数量、当前页、总页数、结果list这几个值,那么我就把这些变量封装到一个基本实体类中,然后在service实现类中去求出这些变量的算法,那么我servlet执行时候,只用获取页面当前页的值,就可以算出所有变量的值。说的有点不清晰,那么我们直接上代码吧!
首先我们先看一下JSP的页面结构:
列表页newsDetailList.jsp:
底部调用公共分页的jsp
<!--隐藏域,当前页码 --> <input type="hidden" id="pageIndex" name="pageIndex" value="1"/>
<input type="hidden" id="totalPageCount" name="totalPageCount" value="${totalPageCount }"/> <c:import url="rollPage.jsp"> <c:param name="totalCount" value="${totalCount }"></c:param> <c:param name="currentPageNo" value="${currentPageNo }"></c:param> <c:param name="totalPageCount" value="${totalPageCount}"></c:param> </c:import>
上面当前页的设置为隐藏域,只是为了获取当前在第几页这个数据,用来算出其它几个值。
totalPageCount的隐藏域是为了执行输入页面GO到相应页的操作
看一下rollPage.jsp:
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>Insert title here</title> 5 <script type="text/javascript"> 6 function page_nav(frm,num){ 7 frm.pageIndex.value=num; 8 frm.submit(); 9 } 10 11 function go(frm,pageno){ 12 //var regexp=/^\d+$/; 13 var regexp=/^[1-9]\d*$/; 14 var totalPage = document.getElementById("totalPageCount").value; 15 if(!regexp.test(pageno)){ 16 alert("请输入 正确的数字!"); 17 return false; 18 }else if((pageno-totalPageCount) > 0){ 19 alert("总页码一共"+totalPageCount+"页,请输入正确的页码!"); 20 return false; 21 }else{ 22 page_nav(frm,pageno); 23 } 24 25 } 26 27 28 </script> 29 </head> 30 31 <body> 32 33 <div class="page-bar"> 34 <ul class="page-num-ul clearfix"> 35 <li>共${param.totalCount}条记录 36 ${param.currentPageNo}/${param.totalPageCount }页</li> 37 <c:if test="${param.currentPageNo>1}"> 38 <a href="javaScript:page_nav(document.forms[0],1)">首页</a> 39 <a 40 href="javaScript:page_nav(document.forms[0],${param.currentPageNo-1});">上一页</a> 41 </c:if> 42 <c:if test="${param.currentPageNo<param.totalPageCount}"> 43 <a 44 href="javaScript:page_nav(document.forms[0],${param.currentPageNo+1});">下一页</a> 45 <a 46 href="javaScript:page_nav(document.forms[0],${param.totalPageCount });">最后一页</a> 47 </c:if> 48 </ul> 49 <span class="page-go-form"><label>跳转至</label> <input 50 type="text" name="inputPage" id="inputPage" class="page-key" value="" />页 51 52 53 <button type="submit" class="page-btn" 54 onclick='go(document.forms[0],document.getElementById("inputPage").value)'>GO</button> 55 56 </span> 57 </div> 58 </body> 59 </html>
这个公共的分页,作用:控制分页界面的显示及提交到当前选择的页码
后端DAO实体类:
package com.cn.pb.dao.util; import java.sql.Connection; import java.util.List; public class PageBase<M> { //当前页码,默认为第1页 private int currentPageNo =1; //总页数 private int totalPageCount; //总记录数 private int totalCount; //页面容量 private int pageSize=5; //上一页 private int upPageNo; //下一页 private int nextPageNo; //一页的结果 private List<M> list; public int getUpPageNo() { return upPageNo; } public void setUpPageNo(int upPageNo) { //如果当前页>1 if(this.currentPageNo>1){ this.upPageNo = this.currentPageNo-1; } } public int getNextPageNo() { return nextPageNo; } public void setNextPageNo(int nextPageNo) { //如果当前页>0且小于总页数,则可以有下一页 if(this.currentPageNo>0 &&this.currentPageNo<this.totalPageCount){ this.nextPageNo = currentPageNo+1; } } public List<M> getList() { return list; } public void setList(List<M> list) { this.list = list; } public int getCurrentPageNo() { return currentPageNo; } //如果当前页码大于0才设置当前页码值 public void setCurrentPageNo(int currentPageNo) { if(currentPageNo>0){ this.currentPageNo = currentPageNo; } } public int getTotalCount() { return totalCount; } public void setTotalCount(int totalCount) { if(totalCount>0){ this.totalCount = totalCount; } } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { if(pageSize >0){ this.pageSize = pageSize; } } public int getTotalPageCount() { return totalPageCount; } public void setTotalPageCount(int totalPageCount) { if(this.getTotalCount()%this.pageSize==0){ this.totalPageCount = this.getTotalCount()/this.pageSize; }else if(this.getTotalCount()%this.pageSize>0){ this.totalPageCount = this.getTotalCount()/this.pageSize +1 ; }else{ this.totalPageCount =0; } } /*//设置总页数 public void setTotalPageCount(int ) { if(this.getTotalCount()%this.pageSize==0){ this.totalPageCount = this.getTotalCount()/this.pageSize; }else if(this.getTotalCount()%this.pageSize>0){ this.totalPageCount = this.getTotalCount()/this.pageSize +1 ; }else{ this.totalPageCount =0; } } */ }
service接口:
1 //分页和list独立出一个javabean 2 public PageBase<NewsDetail> getPages(int pageNo,String where);
service实现类:
1 public PageBase<NewsDetail> getPages(int pageNo, 2 String where) { 3 PageBase<NewsDetail> pb=new PageBase<NewsDetail>(); 4 pb.setCurrentPageNo(pageNo); 5 pb.setTotalCount(this.getNewsCount(where)); 6 pb.setTotalPageCount(pb.getTotalCount()/pb.getPageSize()); 7 pb.setNextPageNo(pageNo-1); 8 pb.setUpPageNo(pageNo+1); 9 pb.setList(this.getPageNewsList(pageNo, pb.getPageSize(), where)); 10 return pb; 11 }
web.xml
1 <servlet> 2 <servlet-name>newsListByLikeServlet</servlet-name> 3 <servlet-class>com.cn.pb.servlet.NewsListByLike3</servlet-class> 4 </servlet> 5 <servlet-mapping> 6 <servlet-name>newsListByLikeServlet</servlet-name> 7 <url-pattern>/servlet/newsListServlet</url-pattern> 8 </servlet-mapping>
其实也就是把我上一篇<JSP+Servlet+javabean实现页面多条件模糊查询>中servlet那部分分页和求结果list给抽出来封装了,好吧,我只是改了web.xml中的类名,其它地方啥都不用改。可以多个servlet切着来