Pagehelper插件

官方文档

https://pagehelper.github.io/docs/

最终效果

导入依赖

<!-- 分页插件-->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>5.1.10</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter -->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.2.12</version>
</dependency>

配置文件

pagehelper.helper-dialect=mysql
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true
pagehelper.params=count=countsql

java部分

@RequestMapping("/article")
public String articleList(Model model,
                            @RequestParam(required = false,defaultValue = "1",value = "pageNum") Integer pageNum,
                            @RequestParam(required = false,defaultValue = "7",value = "pageSize") Integer pageSize){
    //首先进行非空判断
    if(pageNum==null || pageNum<=0){
        pageNum = 1;
    }
    if(pageSize == null){
        pageSize = 1;
    }
    PageHelper.startPage(pageNum,pageSize);
    try{
        List<Article> articles = articleService.queryAllArticle();
        //代码顺序严格按照此格式来写
        PageInfo<Article> pageInfo = new PageInfo<>(articles,pageSize);
        //返回前端分页的数据和pageInfo
        model.addAttribute("pageInfo",pageInfo);
        model.addAttribute("articleList",articles);
    }finally {
    //操作完成后一定要清理
        PageHelper.clearPage();
    }
    return "admin/article-list";
}
	```
## 前端部分
#### 数据显示
```html
th:each="article:${articleList}"

分页按钮(此处使用layUI样式)

<div class="layui-card-body ">
    <div style="dotted: #e2e2e2; text-align: center;">
        <a class="layui-btn layui-btn-sm layui-btn-radius" th:href="'/blog/admin/article?pageNum=1'">首页</a>
        <a class="layui-btn layui-btn-sm layui-btn-radius" th:if="${pageInfo.hasPreviousPage}" th:href="'/blog/admin/article?pageNum='+${pageInfo.prePage}">上一页</a>
        <span th:if="${pageInfo.hasPreviousPage}">…</span>
        <span th:each="nav:${pageInfo.navigatepageNums}">
                <a class="layui-badge layui-bg-gray" th:if="${nav != pageInfo.pageNum}" th:href="'/blog/admin/article?pageNum='+${nav}" th:text="${nav}">1</a>
                <span class="layui-badge layui-bg-black" th:if="${nav == pageInfo.pageNum}" th:href="'/blog/admin/article?pageNum='+${nav}" th:text="${nav}">1</span>
            </span>
        <span th:if="${pageInfo.hasNextPage}">…</span>
        <a class="layui-btn layui-btn-sm layui-btn-radius" th:href="'/blog/admin/article?pageNum='+${pageInfo.pages}+'#pageHelper'" title="尾页">尾页</a>
        <a class="layui-btn layui-btn-sm layui-btn-radius" th:if="${pageInfo.hasNextPage}"  th:href="'/blog/admin/article?pageNum='+${pageInfo.nextPage}">下一页</a>
    </div>
</div>