分頁(yè)顯示的功能實(shí)現(xiàn)：

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

---

一、分頁(yè)顯示無(wú)處不在

---

意義：

實(shí)際中不會(huì)將所有數(shù)據(jù)一起顯示出來(lái)，加載費(fèi)時(shí)，效率也低，所以需要考慮數(shù)據(jù)的分頁(yè)顯示

---

二、前期準(zhǔn)備

（1）jar包

（2）頭部標(biāo)簽

<%@ 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" %>

---

三、具體實(shí)現(xiàn)分析

1. 實(shí)現(xiàn)：首頁(yè)上一頁(yè)

通過(guò)超鏈接，跳轉(zhuǎn)到servlet，并且傳遞pageNo來(lái)實(shí)現(xiàn) <c:if test="${requestScope.page.pageNo>1}"><a href="manager/bookServlet?action=page&pageNo=1">首頁(yè)</a><a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo-1}">上一頁(yè)</a> </c:if>

2. 實(shí)現(xiàn)：末頁(yè)下一頁(yè)

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

3.實(shí)現(xiàn)：輸入頁(yè)面跳轉(zhuǎn)

通過(guò)綁定單擊事件，響應(yīng)跳轉(zhuǎn)servlet調(diào)用page方法并且傳遞pageNo實(shí)現(xiàn) $("#inputbtn").click(function(){var pageNumber = $("#pn_input").val();location.href ="${pageScope.basePath}manager/bookServlet?action=page&pageNo="+pageNumber; });

4. 實(shí)現(xiàn)：顯示 1 2【3】4 5，多頁(yè)面選項(xiàng)

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

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

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

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

?

四、總的分析

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

---

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。