JSP+JavaBean+Servlet實現各類列表分頁功能


需求:

每頁列表下都有一個分頁的功能,顯示總數量、當前頁/總頁數、首頁、上一頁、下一頁、最后一頁、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}條記錄&nbsp;&nbsp;
36                 ${param.currentPageNo}/${param.totalPageCount }頁</li>&nbsp;&nbsp;
37             <c:if test="${param.currentPageNo>1}">
38                 <a href="javaScript:page_nav(document.forms[0],1)">首頁</a>&nbsp;&nbsp;
39                     <a
40                     href="javaScript:page_nav(document.forms[0],${param.currentPageNo-1});">上一頁</a>&nbsp;&nbsp;
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切着來

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM