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

PageHelper是一个分页插件,能够简单快速的帮助开发人员完成常见的分页功能,你只需要简单的使用两行代码就可以完成一个分页效果…

最近做一个科创项目,使用Maven+SSM的环境,有分页的功能,于是使用了PageHelper的分页工具来完成分页功能,体验非常不错。

准备工作

1. 数据库准备

database

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是一个容易上手的前端库,提供了非常多的样式,地址: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)

(数据有限,只有两页...)
smartpig wechat
扫一扫关注微信公众号
0%