分頁顯示的功能實現：

• • 一、分頁顯示無處不在
  • • • • 意義：
  • 二、前期準備
  • • • （1）jar包
      • （2）頭部標簽
  • 三、具體實現分析
  • • 1. 實現：首頁上一頁
    • 2. 實現：末頁下一頁
    • 3.實現：輸入頁面跳轉
    • 4. 實現：顯示 1 2【3】4 5，多頁面選項
    • • |-- 如果總頁碼小于等于 5 的情況，頁碼的范圍是：`1-總頁碼`
      • |-- 如果總頁碼大于5，那么就需要分情況討論
  • 四、總的分析

---

一、分頁顯示無處不在

---

意義：

實際中不會將所有數據一起顯示出來，加載費時，效率也低，所以需要考慮數據的分頁顯示

---

二、前期準備

（1）jar包

（2）頭部標簽

<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>

---

三、具體實現分析

1. 實現：首頁上一頁

通過超鏈接，跳轉到servlet，并且傳遞pageNo來實現 <c:if test="${requestScope.page.pageNo>1}"><a href="manager/bookServlet?action=page&pageNo=1">首頁</a><a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo-1}">上一頁</a> </c:if>

2. 實現：末頁下一頁

<c:if test="${requestScope.page.pageNo<requestScope.page.pageTotal}"><a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo+1}">下一頁</a><a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageTotal}">末頁</a> </c:if>

3.實現：輸入頁面跳轉

通過綁定單擊事件，響應跳轉servlet調用page方法并且傳遞pageNo實現 $("#inputbtn").click(function(){var pageNumber = $("#pn_input").val();location.href ="${pageScope.basePath}manager/bookServlet?action=page&pageNo="+pageNumber; });

4. 實現：顯示 1 2【3】4 5，多頁面選項

|-- 如果總頁碼小于等于 5 的情況，頁碼的范圍是：1-總頁碼

<c:when test="${requestScope.page.pageTotal<=5}"><%--循環輸出這些頁碼--%><c:forEach begin="1" end="${requestScope.page.pageTotal}" var="i"><%--如果是當前頁面，則顯示【當前頁碼】--%><c:if test="${i == requestScope.page.pageNo}">【${i}】</c:if><%--如果不是當前頁碼則直接顯示數字，并加上超鏈接實現可以跳轉的功能--%><c:if test="${i != requestScope.page.pageNo}"><a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a></c:if></c:forEach> </c:when>

|-- 如果總頁碼大于5，那么就需要分情況討論

|-- 開始前3個，顯示1-5|-- 最后3個頁碼，顯示(Total-4)-Total|-- 之外，始終保持當前頁碼在中間，，顯示（當前頁碼-2）-（當前頁碼+2） <c:when test="${requestScope.page.pageTotal>5}"><c:choose><%--頁碼在前三，顯示1-5--%><c:when test="${requestScope.page.pageNo<=3}"><c:forEach begin="1" end="5" var="i"><%--如果是當前頁面，則顯示【當前頁碼】--%><c:if test="${i == requestScope.page.pageNo}">【${i}】</c:if><%--如果不是當前頁碼則直接顯示數字，并加上超鏈接實現可以跳轉的功能--%><c:if test="${i != requestScope.page.pageNo}"><a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a></c:if></c:forEach></c:when><%--頁碼在后三，顯示(Total-4)-Total--%><c:when test="${requestScope.page.pageNo > requestScope.page.pageTotal-3}"><c:forEach begin="${requestScope.page.pageTotal-4}" end="${requestScope.page.pageTotal}" var="i"><%--如果是當前頁面，則顯示【當前頁碼】--%><c:if test="${i == requestScope.page.pageNo}">【${i}】</c:if><%--如果不是當前頁碼則直接顯示數字，并加上超鏈接實現可以跳轉的功能--%><c:if test="${i != requestScope.page.pageNo}"><a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a></c:if></c:forEach></c:when><%--其余其他情況，顯示（當前頁碼-2）-（當前頁碼+2）--%><c:otherwise><c:forEach begin="${requestScope.page.pageNo-2}" end="${requestScope.page.pageNo+2}" var="i"><%--如果是當前頁面，則顯示【當前頁碼】--%><c:if test="${i == requestScope.page.pageNo}">【${i}】</c:if><%--如果不是當前頁碼則直接顯示數字，并加上超鏈接實現可以跳轉的功能--%><c:if test="${i != requestScope.page.pageNo}"><a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a></c:if></c:forEach></c:otherwise></c:choose></c:when>

?

四、總的分析

注意：這并不是完整的代碼，只是分析的思路部分

---

|-- 分頁顯示的功能：實際中不會將所有數據一起顯示出來，加載費時，效率也低，所以需要考慮分頁顯示分頁內容：pageNo 需要知道當前頁碼pageTotal 需要計算總頁碼pageTotalCount 需要知道數據庫中圖書總記錄數pageSize 需要設置每頁顯示數量Items 需要獲取當前頁圖書數據javaBean:Page類DAO部分：BookDAO里面新增方法，新增測試查詢總記錄數public Integer queryTotalCount() {String sql = "SELECT COUNT(*) FROM t_book;";Number number = (Number) querySingleValue(sql);return number.intValue();}查詢當前頁面的圖書數據public List<Book> queryPageItems(Integer begin,Integer pageSize) {String sql = "SELECT id,bookname,author,bookprice,sale,save,img_path FROM t_book LIMIT ?,?;";List<Book> books = queryList(Book.class, sql, begin,pageSize);return books;}2)分頁模型 Page 的抽取（當前頁數，總頁數，總記錄數，當前頁數據，每頁記錄數）Service部分，新增page()方法方法體內調用DAO，得到數據庫數據，將總記錄數、總頁碼數、當前頁面數據打包成page 對象這里稍微有點難理解，因為之前的Book都是直接調用DAO，就實現增刪查改的操作。Servlet部分，新增page部分，獲取用戶交互頁面的信息，調用service實現功能獲取當前頁碼、頁面顯示數量pagesize傳遞顯示數據4)首頁、上一頁、下一頁、末頁實現通過超鏈接，跳轉到servlet，并且傳遞pageNo來實現<c:if test="${requestScope.page.pageNo>1}"><a href="manager/bookServlet?action=page&pageNo=1">首頁</a><a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo-1}">上一頁</a></c:if><c:if test="${requestScope.page.pageNo<requestScope.page.pageTotal}"><a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo+1}">下一頁</a><a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageTotal}">末頁</a></c:if>5)分頁模塊中跳轉到指定頁數功能實現通過綁定單擊事件，響應跳轉servlet調用page方法并且傳遞pageNo實現$("#inputbtn").click(function(){var pageNumber = $("#pn_input").val();location.href ="${pageScope.basePath}manager/bookServlet?action=page&pageNo="+pageNumber;});6)分頁模塊中，頁碼 1,2,【3】,4,5 的顯示，要顯示 5 個頁碼，并且頁碼可以點擊跳轉如果總頁碼小于等于 5 的情況，頁碼的范圍是：1-總頁碼<c:when test="${requestScope.page.pageTotal<=5}"><%--循環輸出這些頁碼--%><c:forEach begin="1" end="${requestScope.page.pageTotal}" var="i"><%--如果是當前頁面，則顯示【當前頁碼】--%><c:if test="${i == requestScope.page.pageNo}">【${i}】</c:if><%--如果不是當前頁碼則直接顯示數字，并加上超鏈接實現可以跳轉的功能--%><c:if test="${i != requestScope.page.pageNo}"><a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a></c:if></c:forEach></c:when>如果總頁碼大于5，那么就需要分情況討論|-- 開始前3個，顯示1-5|-- 最后3個頁碼，顯示(Total-4)-Total|-- 之外，始終保持當前頁碼在中間，，顯示（當前頁碼-2）-（當前頁碼+2）<c:when test="${requestScope.page.pageTotal>5}"><c:choose><%--頁碼在前三，顯示1-5--%><c:when test="${requestScope.page.pageNo<=3}"><c:forEach begin="1" end="5" var="i"><%--如果是當前頁面，則顯示【當前頁碼】--%><c:if test="${i == requestScope.page.pageNo}">【${i}】</c:if><%--如果不是當前頁碼則直接顯示數字，并加上超鏈接實現可以跳轉的功能--%><c:if test="${i != requestScope.page.pageNo}"><a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a></c:if></c:forEach></c:when><%--頁碼在后三，顯示(Total-4)-Total--%><c:when test="${requestScope.page.pageNo > requestScope.page.pageTotal-3}"><c:forEach begin="${requestScope.page.pageTotal-4}" end="${requestScope.page.pageTotal}" var="i"><%--如果是當前頁面，則顯示【當前頁碼】--%><c:if test="${i == requestScope.page.pageNo}">【${i}】</c:if><%--如果不是當前頁碼則直接顯示數字，并加上超鏈接實現可以跳轉的功能--%><c:if test="${i != requestScope.page.pageNo}"><a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a></c:if></c:forEach></c:when><%--其余其他情況，顯示（當前頁碼-2）-（當前頁碼+2）--%><c:otherwise><c:forEach begin="${requestScope.page.pageNo-2}" end="${requestScope.page.pageNo+2}" var="i"><%--如果是當前頁面，則顯示【當前頁碼】--%><c:if test="${i == requestScope.page.pageNo}">【${i}】</c:if><%--如果不是當前頁碼則直接顯示數字，并加上超鏈接實現可以跳轉的功能--%><c:if test="${i != requestScope.page.pageNo}"><a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a></c:if></c:forEach></c:otherwise></c:choose></c:when>

總結

以上是生活随笔為你收集整理的JSP+JSTL+EL表达式，实现web页面的页面跳转功能（上一页下一页首页末页页面跳转）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。