1. 数据库准备

database

t_diy是用户自己写个性文章的的一个表，t_categories是文章的分类表，t_user用户表；要分页显示的就是根据分类ID查找对应类别的diy信息并显示。

2. PageHelper引入

1. 在pom.xml中引入依赖

<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,第二个参数是页面上需要连续显示多少页（可以省略）。

以下是我的代码：

@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，表示是否是第一页和最后一页（控制首末页按钮，前后页的显示和隐藏）

我的代码如下：

<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)

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

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

1. 数据库准备

2. PageHelper引入

开始使用PageHelper

使用Bootstrap美化分页栏

猜你喜欢