需求:
每頁列表下都有一個分頁的功能,顯示總數量、當前頁/總頁數、首頁、上一頁、下一頁、最后一頁、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切着來