Java Web實作分頁功能
後端開發
- JavaBean（該JavaBean對象是可複用的）
import java.util.List; /** 該Bean對象主要用來裝載分頁資料，為了更好的通用性，設計成了泛型類 */ public class PageBean<T> { private int thisPage; //目前頁的頁碼 private int totalRecords; //總的記錄數（通過從資料庫中查詢得到） private int everyPage; //每個頁面顯示的記錄數（自己定義） private int previousPage; //上一頁的頁碼 private int nextPage; //下一頁的頁碼 private List<T> records; //查詢到的實體類的集合 private int totalPage; //總的頁數（隻有get方法，沒有set方法，通過計算得到） public int getThisPage() { return thisPage; } public void setThisPage(int thisPage) { this.thisPage = thisPage; } public int getTotalRecords() { return totalRecords; } public void setTotalRecords(int totalRecords) { this.totalRecords = totalRecords; } public int getEveryPage() { return everyPage; } public void setEveryPage(int everyPage) { this.everyPage = everyPage; } public int getPreviousPage() { return previousPage; } public void setPreviousPage(int previousPage) { this.previousPage = previousPage; } public int getNextPage() { return nextPage; } public void setNextPage(int nextPage) { this.nextPage = nextPage; } public List<T> getRecords() { return records; } public void setRecords(List<T> records) { this.records = records; } public int getTotalPage() { //總頁數=總的記錄數/每頁顯示的記錄數，如果可以整除就直接傳回，否則就加一後傳回 totalPage=totalRecords/everyPage; return totalRecords%everyPage==0 ? totalPage:totalPage+1; } } - 資料庫操作（dbutils版本）
//總共需要兩個參數，看情況而定，目前頁數是必須要的 public PageBean<Book> findBookByCode(int pageCode, String cid) { int everyPage=3; //這裡的cid是指圖書種類，這句sql是指查詢同一分類圖書的總數量 String sql="select count(*) from book where cid= ? "; //這句sql是主要的業務邏輯，limit後面的兩個數可以通過計算得到，第一個=（目前頁碼-1）*每頁數量，第二個是每頁的數量 String sql2="select book.*,cname from book,category where book.cid = ? and book.cid=category.cid limit ?,?"; try { Number number=qr.query(sql,new ScalarHandler<>(),cid); int totalPage=number.intValue(); PageBean<Book> pageBean=new PageBean<>(); pageBean.setEveryPage(3); pageBean.setNextPage(pageCode+1); pageBean.setPreviousPage(pageCode-1); pageBean.setTotalRecords(totalPage); pageBean.setThisPage(pageCode); List<Book> books = qr.query(sql2, new BeanListHandler<>(Book.class), cid, (pageCode - 1) * everyPage, everyPage); pageBean.setRecords(books); return pageBean; } catch (SQLException e) { throw new RuntimeException(e); } } - 總結
-
關于JavaBean對象
JavaBean對象裡有下列成員變量
其中，前端必須傳遞目前頁，如果沒有傳遞，後端需要設定預設值或者傳回錯誤資訊。而previousPage以及nextPage是根據thisPage計算得到的。everyPage是自己設定的。totalPage可以根據公式private int thisPage; //目前頁的頁碼 private int totalRecords; //總的記錄數（通過從資料庫中查詢得到） private int everyPage; //每個頁面顯示的記錄數（自己定義） private int previousPage; //上一頁的頁碼 private int nextPage; //下一頁的頁碼 private List<T> records; //查詢到的實體類的集合 private int totalPage; //總的頁數（隻有get方法，沒有set方法，通過計算得到）totalPage = totalRecords / everyPage
totalRecords % everyPage == 0
totalPage需要從資料庫中進行查找，一般使用聚合函數進行查找。//總頁數=總的記錄數/每頁顯示的記錄數，如果可以整除就直接傳回，否則就加一後傳回 totalPage=totalRecords/everyPage; return totalRecords%everyPage==0 ? totalPage:totalPage+1; -
關于搜尋
對搜尋結果進行分頁流程是和上面的一樣的，但是要注意，前端除了目前頁碼外還需要傳遞搜尋條件。
-
在jsp頁面中實作分頁功能（計算頁碼）
實作
<c:choose>
<%--這裡用到了兩個變量，分别為begin和end，都是Page域中的對象--%>
<%--如果總頁數<=10(因為按需求是顯示十個頁碼按鈕)則Page域中的begin變量為1，end變量為總頁數--%>
<c:when test="${requestScope.pages.totalPage <= 10}">
<c:set var="begin" value="1"/>
<c:set var="end" value="${requestScope.pages.totalPage}"/>
</c:when>
<c:otherwise>
<%--如果總頁數 > 10，則設定begin變量為目前頁-5，end變量為目前頁+4，如果下面運算得到begin大于1，則從這裡設定的頁碼顯示--%>
<c:set var="begin" value="${requestScope.pages.thisPage-5}"/>
<c:set var="end" value="${requestScope.pages.thisPage+4}"/>
<%--如果經過上述運算，begin< 1 則說明總頁數大于10，但是目前查詢頁并未超過10，那麼頁面上還應該顯示從1到10的頁碼--%>
<c:if test="${begin<1}">
<c:set var="begin" value="1"/>
<c:set var="end" value="${begin+9}"/>
</c:if>
<%--如果end變量的值大于了總頁數，則按下面的顯示--%>
<c:if test="${end>requestScope.pages.totalPage}">
<c:set var="end" value="${requestScope.pages.totalPage}"/>
<c:set var="begin" value="${end-9}"/>
</c:if>
</c:otherwise>
</c:choose>
基本的思路是這樣的：
<%
1.确定在界面上要顯示多少頁碼，比如要顯示的為1~10
2.确定兩個變量，begin和end，用來存放開始頁碼和結束頁碼
3.确定之後就要判斷，totalPage是不是小于10，如果小于10，那麼begin = 1，end = totalPage
%>
<c:when test="${requestScope.pages.totalPage <= 10}">
<c:set var="begin" value="1"/>
<c:set var="end" value="${requestScope.pages.totalPage}"/>
</c:when>
<%
4.如果totalPage > 10,那麼可以使用公式進行計算起始頁（設定begin變量為目前頁-5，end變量為目前頁+4）
5.如果begin-5 < 0，則設定begin = 1，end = 10
6.如果end > totalPage，則設定 end = totalPage，begin = currentPage - 9;(begin和end之間相差9)
%>
在jsp頁面中實作分頁功能（UI展示）
在使用時，需要和上面的計算結合使用，上面的用來計算起始頁碼，下面的主要用來進行ui展示。
<%--使用bootstarp實作的分頁ui，排版較差--%>
<c:if test="${sessionScope.pageInfo.totalPage > 1}">
<div class="container">
<nav class="page pull-right pagination pagination-lg">
<ul class="pagination">
<li>
<c:choose>
<c:when test="${sessionScope.pageInfo.thisPage > 1}">
<a href="${pageContext.request.contextPath}/book/cateGoryServlet?method=paging&cname=${requestScope.cname}&thisPage=${sessionScope.pageInfo.previousPage}&cid=${sessionScope.pageInfo.records.get(0).cid}"
aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</c:when>
<c:otherwise>
<a href="#" aria-label="Previous" class="disabled">
<span aria-hidden="true">«</span>
</a>
</c:otherwise>
</c:choose>
</li>
<c:forEach var="i" begin="${begin}" end="${end}">
<c:choose>
<c:when test="${i eq sessionScope.pageInfo.thisPage}">
<li class="active">
<a href="#">${i}</a>
</li>
</c:when>
<c:otherwise>
<li class="">
<a href="${pageContext.request.contextPath}/book/cateGoryServlet?method=paging&cname=${requestScope.cname}&thisPage=${i}&cid=${sessionScope.pageInfo.records.get(0).cid}">${i}</a>
</li>
</c:otherwise>
</c:choose>
</c:forEach>
<li>
<c:if test="${sessionScope.pageInfo.thisPage < sessionScope.pageInfo.totalPage}">
<a href="${pageContext.request.contextPath}/book/cateGoryServlet?method=paging&cname=${requestScope.cname}&thisPage=${sessionScope.pageInfo.nextPage}&cid=${sessionScope.pageInfo.records.get(0).cid}"
aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</c:if>
<c:if test="${sessionScope.pageInfo.thisPage >= sessionScope.pageInfo.totalPage}">
<a href="#" aria-label="Next" class="disabled">
<span aria-hidden="true">»</span>
</a>
</c:if>
</li>
</ul>
</nav>
</div>
</c:if>