PageHelper是一個分頁插件，能夠簡單快速的幫助開發人員完成常見的分頁功能，你只需要簡單的使用兩行代碼就可以完成一個分頁效果…
最近做一個科創項目，使用Maven+SSM的環境，有分頁的功能，於是使用了PageHelper的分頁工具來完成分頁功能，體驗非常不錯。
1. 數據庫准備
t_diy是用戶自己寫個性文章的的一個表，t_categories是文章的分類表，t_user用戶表；要分頁顯示的就是根據分類ID查找對應類別的diy信息並顯示。
2. PageHelper引入
1. 在pom.xml中引入依賴
1
2
3
4
5
|
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.10</version>
</dependency>
|
（官方推薦使用最新版本，當前最新是5.1.10)
雖然官方說明要引入pagehelper.jar和jsqlparser.jar，但實際上引入pagehelper.jar時會自動引入jsqlparser.jar
2. 配置Mybatis插件
可以選擇在spring配置文件中配置，也可以在mybatis全局配置文件中配置插件。我是在mybatis全局文件中配置的。
1
2
3
|
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
</plugins>
|
這里要說明一點（本人踩過的坑）:
注意plugins的書寫位置
開始使用PageHelper
使用非常簡單，調用PageHelper.startPage(pageNum,pageSize);第一個參數是第幾頁，第二個參數是頁大小，緊跟其后的第一個查詢方法就是一個分頁查詢了。
為了更方便的顯示和處理分頁的結果，可以使用PageInfo對查詢結果進行封裝：PageInfo pageInfo=new PageInfo(data,navigatePages);第一個參數是查詢出來的數據集，一般可以是一個List,第二個參數是頁面上需要連續顯示多少頁（可以省略）。
以下是我的代碼：
1
2
3
4
5
6
7
8
9
10
|
@RequestMapping(value = "/showCategory")
public String getCategories(@RequestParam("cId")Integer cId,@RequestParam(value = "pageNum",defaultValue = "1")Integer pn,ModelMap map){
PageHelper.startPage(pn,14); //每頁顯示14條信息
List<Diy> diys=diyService.getCategories(cId); //獲得分類id為cid的所有diy信息
PageInfo pageInfo=new PageInfo(diys,5); //封裝為PageInfo
map.addAttribute("pageInfo",pageInfo); //PageInfo傳給頁面，可以直接使用EL表達式獲取
map.addAttribute("cols", XBookUtil.getDiyCategoriesCols(pageInfo.getSize()));//這個是我為了較均為的排序數據所設計的方法（不需要關心）
map.addAttribute("curCategory",new Integer(cId));
return "html/bookDIY/categoryView"; //分類頁面視圖：categoryView.jsp
}
|
至於SQL語句，不需要做任何與分頁相關的事情,我的SQL語句就是一個簡單的查詢：
以上就完成了最簡單當然也是最常用的分頁功能，是不是非常簡單。
使用Bootstrap美化分頁欄
分頁數據得到了，當然也需要對頁面進行優化，Bootstrap是一個容易上手的前端庫，提供 大專欄 如何在實際項目中使用PageHelper分頁插件了非常多的樣式，地址：https://v4.bootcss.com
Bootstrap提供了分頁欄樣式，具體的使用就不都說了，可以參考官網。想要的效果應該是這樣的：
其實包含了很多小的邏輯：
- 第一頁時首頁不能點，前一頁不顯示
- 最后一頁時末頁不能點，后一頁不顯示
- 當前頁高亮
- 用戶點擊更新顯示的頁碼
這就是為什么要將結果封裝為PageInfo的好處，使用PageInfo可以方便的控制這些邏輯：
- PageInfo有一個屬性navigatepageNums存放的是當前應該顯示的頁碼，這和之前PageInfo構造的第二個參數有關。（循環顯示頁碼）
- PageInfo有屬性list，存放分頁的數據（獲取數據）
- PageInfo有屬性pageNum,表示當前頁碼 （判斷是否高亮顯示）
- PageInfo有屬性isFirstPage，isLastPage，表示是否是第一頁和最后一頁（控制首末頁按鈕，前后頁的顯示和隱藏）
我的代碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<c:if test="${pageInfo.list.size()>0}">
<div class="container mb-5">
<ul class="pagination justify-content-center">
<c:if test="${pageInfo.isFirstPage}">
<li class="page-item disabled"><a class="page-link" href="#">首頁</a></li>
</c:if>
<c:if test="${pageInfo.isFirstPage != true}">
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/html/bookDIY/showCategory?cId=${curCategory}">首頁</a></li>
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/html/bookDIY/showCategory?cId=${curCategory}&pageNum=${pageInfo.pageNum-1}"><<</a></li>
</c:if>
<c:forEach items="${pageInfo.navigatepageNums}" var="pn">
<c:if test="${pageInfo.pageNum == pn}">
<li class="page-item active"><a class="page-link" href="#">${pn}</a></li>
</c:if>
<c:if test="${pageInfo.pageNum != pn}">
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/html/bookDIY/showCategory?cId=${curCategory}&pageNum=${pn}">${pn}</a></li>
</c:if>
</c:forEach>
<c:if test="${pageInfo.isLastPage}">
<li class="page-item disabled"><a class="page-link" href="#">末頁</a></li>
</c:if>
<c:if test="${pageInfo.isLastPage != true}">
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/html/bookDIY/showCategory?cId=${curCategory}&pageNum=${pageInfo.pageNum+1}">>></a></li>
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/html/bookDIY/showCategory?cId=${curCategory}&pageNum=${pageInfo.pages}">末頁</a></li>
</c:if>
</ul>
</div>
</c:if>
|
最后的效果如下所示：
（數據有限，只有兩頁...）
