Java web 分頁 代碼 模板

第一種類型的分頁

enter description here
enter description here

條件如下

  • 最多顯示5頁(可動態(tài)調(diào)整)
  • 后臺返回總頁數(shù) pages
  • 后臺返回當前頁 currentPage
  • 當前頁不能點擊再次請求
  • 第一頁時上一頁功能禁用
  • 最后一頁時下一頁功能禁用

jsp 界面代碼

1 根據(jù)pagescurrentPage 計算界面要顯示的從開始到結(jié)束的頁碼放入數(shù)組中
<%
        int currentPage = (Integer)request.getAttribute("currentPage");
        int pages = (Integer)request.getAttribute("pages");
        int showPages = 5;
        int midValue = showPages/2;
        int begin = 1;
        int end = showPages;
        //展示page的個數(shù),默認五個
        int showedPageCount = showPages;
        if (pages > showPages){
            //前面不夠,從1開始,后面肯定夠
            if(currentPage - midValue <=0){
                end = showPages;
            } else if(pages - currentPage < midValue){//后面不夠,前面肯定夠
                begin = pages - showPages + 1;
            } else{//兩個都夠
                begin = currentPage -midValue;
                end = currentPage +midValue;
            }
        } else {
            end = pages;
            showedPageCount = pages;
        }
        
        ArrayList<Integer> pageNumList = new ArrayList<Integer>();
        for(int i = 0;i < showedPageCount;i++){
            pageNumList.add(begin+i);
        }
        
    %>
2 使用Bootstrap 分頁插件布局分頁效果
<nav aria-label="Page navigation">
      <ul class="pagination">
        <li
            <c:if test="${currentPage == 1}">class="disabled"</c:if>
        >
          <a 
          <c:if test="${currentPage != 1}">href="/cd/fileIndex/keywordSearch?pageNumStr=${currentPage - 1}&keyword=${keyword}"</c:if>
          <c:if test="${currentPage == 1}">href="#"</c:if>
           aria-label="Previous">
            <span aria-hidden="true">上一頁</span>
          </a>
        </li>
        
        <c:forEach items="<%=pageNumList %>" var="page" >
            <c:choose>
               <c:when test="${currentPage==page}">
                  <li class="active">
                      <span>${page}<span class="sr-only">(current)</span></span>
                  </li>
               </c:when>
               <c:otherwise>
                   <li ><a href="#" onclick="searchFileIndex(${page})">${page}</a></li>
               </c:otherwise>
            </c:choose>
        </c:forEach >
        <li
            <c:if test="${currentPage == pages}">class="disabled"</c:if>
        >
          <a 
           <c:if test="${currentPage != pages}">href="/cd/fileIndex/keywordSearch?pageNumStr=${currentPage + 1}&keyword=${keyword}"</c:if>
           <c:if test="${currentPage == pages}">href="#"</c:if>
           aria-label="Next">
            <span aria-hidden="true">下一頁</span>
          </a>
        </li>
      </ul>
    </nav>

注意事項

  • 需要導入JSTL 頭引用<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  • 由于c:forEach 語法限制循環(huán)只能從1開始,因此不得已使用了數(shù)組pageNumList

相關(guān)鏈接

Bootstrap 分頁插件

第二種類型的分頁

enter description here
enter description here
enter description here
enter description here
enter description here
enter description here
enter description here
enter description here

條件如下

  • 后臺返回總頁數(shù) totalPage
  • 后臺返回當前頁 targetPage
  • 第一頁和最后一頁必須顯示(沒有除外)
  • 當前頁的前三頁和后三頁也需要顯示
  • 當前頁前/后多于三頁(除去首末頁)的使用...代替
  • 當前頁不能點擊
  • 第一頁時上一頁a標簽禁用
  • 最后一頁時下一頁a標簽禁用
1 根據(jù)totalPagetargetPage 計算界面要顯示的從開始到結(jié)束的頁碼以及所有數(shù)據(jù)放入數(shù)組中
public List<String> getPageShowList(int targetPage, int totalPage) {
        int x = targetPage;
        int m = totalPage;
        List<String> pageShowList = new ArrayList<String>();
//      1_第1頁 ,...2_第2頁 
        if (x>5 && (m-x) >4) {
            pageShowList.add(1 + "_第1頁");
            pageShowList.add("...");    
            for (int i = (x-3); i <= (x + 3) ; i++) {
                pageShowList.add( (i) + "_第" + (i) + "頁");
            }
            pageShowList.add("...");
            pageShowList.add( (m) + "_第" + (m) + "頁");
        }else if (x<=5 && (m-x) >4) {
            for (int i = 1; i <= x; i++) {
                pageShowList.add(i + "_第" + (i) + "頁");
            }
            pageShowList.add( (x+1) + "_第" + (x+1) + "頁");
            pageShowList.add( (x+2) + "_第" + (x+2) + "頁");
            pageShowList.add( (x+3) + "_第" + (x+3) + "頁");
            pageShowList.add("...");
            pageShowList.add( (m) + "_第" + (m) + "頁");
        }else if (x>5 && (m-x) <=4) {
            pageShowList.add(1 + "_第1頁");
            pageShowList.add("...");
            for (int i = (x-3); i <= m; i++) {
                pageShowList.add(i + "_第" + (i) + "頁");
            }
        }else if (x <= 5 && (m-x) <= 4) {
            for (int i = 1; i <= m; i++) {
                pageShowList.add(i +  "_第" + (i) + "頁");
            }
        }
        return pageShowList;
    }
2 jsp界面拿出數(shù)據(jù)進行展示,具體的跳轉(zhuǎn)處理流程需要根據(jù)項目需要
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript">
        
        function jumpPage(currentPage,distance){
            var stockName = document.getElementById("stockName");
            var targetPage = 0;
            targetPage = currentPage + (distance);
            var url = '/Oracle-test/bid/bid/queryBidPageStock?targetPage=' 
                + targetPage +'&stockName='+stockName.value;
            window.location.href = url;
        }
        
        function buttonClick(){
            var stockName = document.getElementById("stockName");
            var jumpPageInput = document.getElementById("jumpPageInput");
            var url = '/Oracle-test/bid/bid/queryBidPageStock?targetPage=' 
                + jumpPageInput.value +'&stockName='+stockName.value;
            window.location.href = url;
        }
    </script>
<body>
    
    <table width="90%" border="0" cellspacing="2" cellpadding="3" align="center">
    
        <tr  bgcolor="f5f5f5">
            <td colspan="6">
                <div align="right">
                    當前第${targetPage}頁,共 ${totalPage}頁
                </div>
            </td>
        </tr> 
        <tr  bgcolor="f5f5f5">
            <td colspan="6">
                <div align="right">
                    <c:if test="${targetPage == 1}">上一頁</c:if>
                    <c:if test="${targetPage != 1}">
                        <a href="javascript:jumpPage(${targetPage},-1)">
                        上一頁</a> 
                    </c:if>
                    
                    <%
                    List<String> pageList = (List<String>)request.getAttribute("pageList");
                    if(pageList != null && pageList.size() > 0){
                        for (int i = 0 ; i < pageList.size(); i++){
                            String compstr = pageList.get(i);
                                if(compstr.contains("...")){
                                    %>
                                        <b>...</b>
                                    <%
                                } else {
                                    String[] comStrings = compstr.split("_");
                                    String pageNumStr = comStrings[0];
                                    Integer targetPage = (Integer)request.getAttribute("targetPage");
                                    if(pageNumStr.equals(""+targetPage)){
                                        %>
                                        <b><%=comStrings[1]%></b>
                                    <%
                                    } else {
                                        %>
                                            <a href = "javascript:jumpPage(<%=pageNumStr%>,0)"><%=comStrings[1]%></a>
                                        <%                              
                                    }
                                }
                            }
                            
                        }
                    
                    %>
                    
                    <c:if test="${targetPage == totalPage}">下一頁</c:if>
                    <c:if test="${targetPage != totalPage}">
                        <a href="javascript:jumpPage(${targetPage},+1)">下一頁</a>
                    </c:if>
                    
                    到第<input type = "text" id = "jumpPageInput" value = "${targetPage}" size = "1"> 頁
                       <input type = "button" onclick="javascript:buttonClick()" value = "確定跳轉(zhuǎn)">
                </div>
            </td>
        </tr> 
    </table>
</body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容