跳到主要内容 MyBatisPlus 与 Thymeleaf 全栈分页方案实现 | 极客日志
Java java
MyBatisPlus 与 Thymeleaf 全栈分页方案实现 基于 MyBatisPlus 和 Thymeleaf 的全栈分页解决方案。内容包括环境搭建、实体类定义、业务层分页逻辑实现、控制层 API 交互以及前端表格与分页条的集成。通过配置 MyBatisPlus 分页插件解决分页不展示的问题，实现了后端数据查询与前端页面渲染的无缝对接，提升了系统性能和用户体验。
DevOpsTeam 发布于 2026/4/6 更新于 2026/4/16 前言
分页功能是现代应用开发中不可或缺的一部分。通过 MyBatisPlus 和 Thymeleaf 的深度整合，可以实现一个高效、稳定的全栈分页解决方案。本文将为读者提供一个系统的学习路径，帮助读者掌握这一重要技能。
一、MybatisPlus 搭建及表介绍
MyBatisPlus 是一款基于 MyBatis 的增强版 ORM 框架，它不仅继承了 MyBatis 的灵活性和易用性，还提供了诸如分页插件、代码生成器等强大的功能，极大地简化了开发流程。通过 MyBatisPlus 的分页插件，开发者可以轻松实现高效的分页查询，而无需手动编写复杂的 SQL 分页逻辑。本节将简单介绍在 SpringBoot 中如何搭建 MyBatisPlus 的环境。
1、MybatisPlus 环境搭建
这里以 Maven 为例，在 Pom.xml 文件通过增加以下依赖来引入 MybatisPlus，这里我们需要集成 PostgreSQL 数据库，因此还需要同时引入对应的数据库驱动包，在 JavaBean 的生成过程中，为了简化 Get 和 Set 等方法，还需要引入 Lombok 组件，对应的资源引入 xml 文件如下：
<dependency >
<groupId > com.baomidou</groupId >
<artifactId > mybatis-plus-boot-starter</artifactId >
<version > ${mybatis-plus.version}</version >
</dependency >
<dependency >
<groupId > org.projectlombok</groupId >
<artifactId > lombok</artifactId >
<scope > provided</scope >
</dependency >
<dependency >
<groupId > net.postgis</groupId >
< postgis-jdbc微信扫一扫，关注极客日志 微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具 Keycode 信息 查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码 JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化 使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆 Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码 将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器 将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
artifactId
</artifactId >
<version >
</version >
</dependency >
2、示例表结构介绍 这里使用城市停水信息数据为例，重点介绍如何进行数据的分页展示，在正式介绍分页实现之前，首先将基础的表结构和示例数据给大家做一个介绍。
二、Java 后台分页实现 本节将使用 Java 开发语言，结合 MybatisPlus 框架详细介绍在后台如何实现前端的分页需求。包含三个方面的内容，第一个方面是介绍业务实体的实现，第二个方面是介绍业务层如何进行分页实现，第三方面是控制层的 API 如何跟前端交互。
1、实体类实现 实体的实现比较简单，这里直接给出具体的 Java 代码如下：
package org.yelang.pcwater.domain;
import java.io.Serializable;
import java.util.Date;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.google.gson.annotations.SerializedName;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;
@TableName(value = "biz_stop_water_info")
@NoArgsConstructor
@AllArgsConstructor
@Setter
@Getter
@ToString
public class StopWaterInfo implements Serializable {
private static final long serialVersionUID = -1582687729349525826L ;
@TableId(value="pk_id")
private Long pkId;
@TableField(value = "affect_user")
private String affectUser;
@TableField(value = "affected_range")
private String affectedRange;
@TableField(value = "affect_region")
private String affectRegion;
@TableField(value = "created_on")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date createdOn;
@TableField(value = "inform_emergency_plan")
private String informEmergencyPlan;
@TableField(value = "inform_id")
private Integer informId;
@TableField(value = "inform_remark")
private String informRemark;
@TableField(value = "main_lead_path")
private String mainLeadPath;
private String position;
private String reason;
@TableField(value = "service_phone")
private String servicePhone;
@TableField(value = "show_end_date")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@SerializedName("showenddate")
private Date showEndDate;
@TableField(value = "stop_end_time")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date stopEndTime;
@TableField(value = "stop_start_time")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date stopStartTime;
@TableField(value = "stop_time")
@SerializedName("stoptime")
private String stopTime;
@TableField(value = "stopwater_type")
private String stopwaterType;
@TableField(value = "supply_emergency_plan")
private String supplyEmergencyPlan;
@TableField(value = "supply_remark")
private String supplyRemark;
private String title;
private String type;
@TableField(value = "regin_name")
private String reginName;
@TableField(value = "sync_sno")
private Long syncSno;
}
2、业务层分页实现 在查询业务中，分页是一个重要的核心，这里我们将具体的实现逻辑都放到业务层来实现，在这里需要使用一个非常重要的对象 Page 分页对象，这是 MybatisPlus 的一个基础分页组件，这里也是使用这个对象来完成具体的业务。首先我们在业务接口中定义如下方法：
IPage<StopWaterInfo> page (Integer pageNum, Integer pageSize,String regionName) ;
@Override
public IPage<StopWaterInfo> page (Integer pageNum, Integer pageSize, String regionName) {
QueryWrapper<StopWaterInfo> queryWrapper = new QueryWrapper <StopWaterInfo>();
queryWrapper.like("regin_name" , regionName);
queryWrapper.orderByDesc("created_on" );
Page<StopWaterInfo> page = new Page <StopWaterInfo>(pageNum, pageSize);
return this .baseMapper.selectPage(page, queryWrapper);
}
这里我们通过构造 Page 对象，将控制层传入的当前页面和每页显示的数据量大小一起传入，然后构造分页信息，一起传给 MybatisPlus 来进行查询方法的实现。
3、控制层实现 控制层比较简单，接收前端提交的三个参数，当前页数，每页显示数据量，还有一个查询条件参数。然后调用业务层的分页方法，最后将结果回写给前端，核心代码如下：
@PostMapping("/list")
@ResponseBody
public AjaxResult list (@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "5") Integer pageSize,
@RequestParam(defaultValue = "") String regionName) {
IPage<StopWaterInfo> page = waterInfoService.page(pageNum, pageSize, regionName);
AjaxResult result = AjaxResult.success();
result.put("data" , page);
return result;
}
三、Thymeleaf 分页集成 Thymeleaf 是一种现代的 Java 模板引擎，它能够很好地与 Spring Boot 集成，提供了一种优雅的方式来构建动态 HTML 页面。Thymeleaf 的优势在于它能够在开发阶段以静态 HTML 的形式展示页面，这使得前端开发变得更加直观和便捷。同时，Thymeleaf 提供了丰富的表达式和标签，能够方便地实现数据绑定和页面渲染。本节将具体介绍如何在 Thymeleaf 中集成后端的分页应用，并且实现分页条。
1、分页表格展示 为了在表格中展示相关的数据，我们首先需要在 Html 中定义以下 html 结构，
<div >
<table >
<thead >
<tr >
<th > 创建时间</th >
<th > 停水地点</th >
<th > 原因</th >
</tr >
</thead >
<tbody id ="table-body" >
<tr th:if ="${#lists.isEmpty(waterEvents)}" >
<td colspan ="3" > 请点击查询按钮加载数据。</td >
</tr >
</tbody >
</table >
</div >
为了演示简单，这里使用 ajax 的方式从后天加载相应的数据，示例代码如下：
function renderTablePage (page ) {
currentPage = page;
const tableBody = document .getElementById ('table-body' );
tableBody.innerHTML = '' ;
$.ajax ({
type :"post" ,
url :ctx + "datasync/list" ,
dataType :"json" ,
cache :false ,
processData :true ,
data : {"pageNum" :page,"pageSize" :EVENTS_PER_PAGE ,"regionName" :"" },
success :function (result ){
const pageData = result.data .records ;
const totalPages = result.data .pages ;
if (pageData.length === 0 ) {
tableBody.innerHTML = `<tr><td colspan="5">未找到符合条件的停水事件。</td></tr>` ;
} else {
pageData.forEach (event =>const row = tableBody.insertRow ();
row.innerHTML = `
<td>${event.createdOn} </td>
<td>${event.position} </td>
<td>${event.reason} </td>
` ;
});
}
renderPagination (totalPages);
},
error :function (innerHTML = `<tr><td colspan="5">未找到符合条件的停水事件。</td></tr>` ;
}
});
}
通过代码可以看到，在拿到后台的响应数据后，我们将循环数据来动态实现表格数据的拼接展示。同时将生成分页条。
2、分页条集成 分页条的展示也需要在网页中插入页面元素，在 html 页面中定义以下网页标签，如下：
<div >
<nav aria-label ="Table Pagination" >
<ul id ="table-pagination" > </ul >
</nav >
</div >
在获取表格数据的同时，我们就可以来同步设置分页条的，分页条的这里不采用特别复杂的样式，仅展示上一页和下一页，对应的代码如下：
function renderPagination (totalPages ) {
const paginationContainer = document .getElementById ('table-pagination' );
paginationContainer.innerHTML = '' ;
if (totalPages <= 1 ) return ;
paginationContainer.innerHTML += `<li${currentPage === 1 ? ' disabled' : '' } >` ;
paginationContainer.innerHTML += `<a href="#" onclick="changePage(${totalPages} ,${currentPage - 1 } )" aria-label="Previous">前一页</a>` ;
paginationContainer.innerHTML += `</li>` ;
paginationContainer.innerHTML += `<li${currentPage === totalPages ? ' disabled' : '' } >` ;
paginationContainer.innerHTML += `<a href="#" onclick="changePage(${totalPages} ,${currentPage + 1 } )" aria-label="Next">后一页</a>` ;
paginationContainer.innerHTML += `</li>` ;
}
3、成果展示
四、可能遇到的问题 本节将介绍一个在实现分页应用的过程中经常容易遇到的问题，也就是没有得到分页信息的问题。以及如何来解决。
1、分页不展示 在成果页面中可以看到，正常的页面是每页展示若干条，而且表格下方带了分页条的。如果你也能实现，说明配置没有问题。如果你的应用截图如下：
出现了数据全部加载的问题。那么可以看看本节的解决方案。
2、问题解决 如果你也遇到这种没有分页条的情况，大概率是遇到了没有正确设置 Mybatis 的数据库分页插件的问题。导致了业务层在执行业务中，没有正确处理分页问题。解决的办法也很简单，在后台配置好分页插件即可。配置方法如下：
package org.yelang.pcwater.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
@Configuration
public class MybatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor () {
MybatisPlusInterceptor i = new MybatisPlusInterceptor ();
i.addInnerInterceptor(new PaginationInnerInterceptor (DbType.POSTGRE_SQL));
return i;
}
}
配置好以上代码后，再次运行程序，你就会发现已经成功的出现了分页条。
五、总结 以上就是本文的主要内容，本文的目标是为开发者提供一个完整的全栈分页解决方案，从基础概念到具体实现，再到实际案例，帮助读者全面掌握这一技能。本文将提供一个系统的学习路径，帮助读者掌握这一重要技能。
