如何在实际项目中使用PageHelper分页插件

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可以方便的控制这些逻辑：

1. PageInfo有一个属性navigatepageNums存放的是当前应该显示的页码，这和之前PageInfo构造的第二个参数有关。（循环显示页码）
2. PageInfo有属性list，存放分页的数据（获取数据）
3. PageInfo有属性pageNum,表示当前页码 （判断是否高亮显示）
4. 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>

最后的效果如下所示：
![](如何在实际项目中使用PageHelper分页插件/result.PNG)

（数据有限，只有两页...）