springBoot+thymleaf+pageHelper实现分页_the templates 分页-CSDN博客

本文链接：https://blog.csdn.net/hjq0426/article/details/108007151

最近使用springBoot写一个简单的列表页面，要实现分页功能，我所用技术：springBoot+mybatis+thymleaf+pageHelper+bootstrap

先上效果图

实现步骤：

一、springBoot工程中引入thymleaf，pom.xml文件中导入包相关包

<!--thymeleaf -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<!--pagehelper分页插件 -->
<dependency>
	<groupId>com.github.pagehelper</groupId>
	<artifactId>pagehelper-spring-boot-starter</artifactId>
	<version>1.2.5</version>
</dependency>

<dependency>
	<groupId>org.webjars</groupId>
	<artifactId>bootstrap</artifactId>
	<version>3.3.5</version>
</dependency>
<dependency>
	<groupId>org.webjars</groupId>
	<artifactId>jquery</artifactId>
	<version>3.1.1</version>
</dependency>

二、修改配置文件，指定页面位置

在application.yml文件中配置

# 静态页面
  thymeleaf:
    prefix:
      classpath: /templates
    cache: false

三、上代码

前台代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>logList</title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>
<body class="container">
<br/>
<h1>证书管理</h1>
<br/><br/>



<div class="with:80%">
    <table class="table table-hover">
        <thead>
        <tr>
            <!--<th>#</th>-->
            <th>证书id</th>
            <th>颁发机构issuer</th>
            <th>设备vid</th>
            <th>运行状态</th>
            <th>证书有效期</th>
            <th>证书颁发时间</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="log : ${pageInfo.list}">
           <!-- <th scope="row" th:text="${pageInfo.index + 1}">1</th>-->
            <td th:text="${log.ecName}">neo</td>
            <td th:text="${log.issuer}">neo</td>
            <td th:text="${log.vid}">Otto</td>
            <td th:text="${log.status}">6</td>
            <td th:text="${log.expiredTime}">6</td>
            <td th:text="${log.publishTime}">6</td>
        </tr>
        </tbody>
    </table>

</div>

<!--显示分页信息-->
<div class="modal-footer no-margin-top">
    <div class="col-md-6">
        当前第 [[${pageInfo.pageNum}]]页,共 [[${pageInfo.pages}]] 页.一共 [[${pageInfo.total}]] 条记录
    </div>

    <ul class="pagination pull-right no-margin">
        <li th:if="${pageInfo.hasPreviousPage}">
            <a th:href="'/enquipmerntLog/list?pageNum=1'">首页</a>
        </li>

        <li class="prev" th:if="${pageInfo.hasPreviousPage}">
            <a th:href="'/enquipmerntLog/list?pageNum='+${pageInfo.prePage}">上一页
                <i class="ace-icon fa fa-angle-double-left"></i>
            </a>
        </li>
        <!--遍历条数-->
        <li th:each="nav:${pageInfo.navigatepageNums}">
            <a th:href="'/enquipmerntLog/list?pageNum='+${nav}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}"></a>
            <span style="font-weight: bold;background: #6faed9;" th:if="${nav == pageInfo.pageNum}" th:text="${nav}" ></span>
        </li>



        <li class="next" th:if="${pageInfo.hasNextPage}">
            <a th:href="'/enquipmerntLog/list?pageNum='+${pageInfo.nextPage} + '&certId='+${searchInfo.certId}">下一页
                <i class="ace-icon fa fa-angle-double-right"></i>
            </a>
        </li>
        

        <li>
            <a th:href="'/enquipmerntLog/list?pageNum='+${pageInfo.pages}">尾页</a>
        </li>
    </ul>
</div>


</body>
</html>

controller层代码（具体类自己创建，这里只显示相关代码）：

 @GetMapping("/list")
    public String list(Model model, @RequestParam(value = "pageNum", defaultValue = "0") Integer pageNum,
                       @RequestParam(value = "pageSize", defaultValue = "10") Integer pageSize,
                       @ModelAttribute(value = "searchInfo")SearchInfo searchInfo) {
        

        PageHelper.startPage(pageNum, pageSize);
        try {
            List<EnquipmerntLogModel> logModels = enquipmerntLogService.getList(searchInfo);
            PageInfo<EnquipmerntLogModel> pageInfo = new PageInfo<EnquipmerntLogModel>(logModels,pageSize);
            model.addAttribute("pageInfo",pageInfo);
            model.addAttribute("searchInfo",searchInfo);
        }finally {
            PageHelper.clearPage(); 
        }

        return "enquipmerntLog";
    }

server层代码：

@Override
    public List<EnquipmerntLogModel> getList(SearchInfo searchInfo){
        
        List<EnquipmerntLogModel> equipmentLogs = mapper.selectLogList(searchInfo);
        
        return equipmentLogs;

    }

具体从数据库中查询数据，可以自己根据自己需求去查询数据