MyBatisPlus 与 Thymeleaf 全栈分页实战指南

2. 示例表结构

以城市停水信息为例，主要包含时间、地点、原因等字段。表结构如下：

对应的实例数据预览：

二、Java 后台分页实现

后端部分主要涉及实体类映射、业务层逻辑封装以及控制层接口暴露。

1. 实体类定义

使用注解映射数据库表，Lombok 处理 Getter/Setter。注意日期字段的格式化配置。

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. 业务层分页逻辑

MyBatisPlus 的分页核心在于 Page 对象和 IPage 返回类型。我们在 Service 接口定义分页方法，并在实现类中组装查询条件。

/**
 * 根据区域查询分页停水信息列表
 */
IPage<StopWaterInfo> page(Integer pageNum, Integer pageSize, String regionName);

具体实现时，利用 QueryWrapper 构建动态查询，并传入当前页码和每页条数：

@Override
public IPage<StopWaterInfo> page(Integer pageNum, Integer pageSize, String regionName) {
    QueryWrapper<StopWaterInfo> queryWrapper = new QueryWrapper<>();
    // 模糊查询区域名称
    queryWrapper.like("regin_name", regionName);
    // 按创建时间倒序
    queryWrapper.orderByDesc("created_on");
    
    // 构造分页对象
    Page<StopWaterInfo> page = new Page<>(pageNum, pageSize);
    return this.baseMapper.selectPage(page, queryWrapper);
}

这里通过构造 Page 对象，将控制层传入的当前页和每页大小一起传给 MyBatisPlus，框架会自动拦截 SQL 并添加 LIMIT 和 COUNT 语句。

3. 控制层接口

Controller 负责接收前端参数，调用 Service，并将结果封装返回。这里使用了标准的 AJAX 响应格式。

@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 前端集成

前端部分主要利用 Ajax 异步加载数据，并通过 DOM 操作动态渲染表格和分页条。

1. 表格展示

HTML 结构中预留表格容器，JS 负责填充内容。当数据为空时显示提示行。

<div>
    <table>
        <thead>
            <tr>
                <th>创建时间</th>
                <th>停水地点</th>
                <th>原因</th>
            </tr>
        </thead>
        <tbody id="table-body">
            <!-- 数据将通过 JS 插入 -->
        </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() {
            tableBody.innerHTML = `<tr><td colspan="5">未找到符合条件的停水事件。</td></tr>`;
        }
    });
}

2. 分页条集成

分页条同样需要动态生成，支持上一页和下一页跳转。注意处理边界情况（如第一页禁用上一页）。

<div>
    <nav aria-label="Table Pagination">
        <ul id="pagination-list"></ul>
    </nav>
</div>

JS 逻辑修正了原代码中的标签错误，确保生成合法的 <li> 元素：

function renderPagination(totalPages) {
    const paginationContainer = document.getElementById('pagination-list');
    paginationContainer.innerHTML = '';
    if (totalPages <= 1) return;

    // 上一页按钮
    const prevLi = document.createElement('li');
    if (currentPage > 1) {
        prevLi.innerHTML = `<a href="#" onclick="changePage(${totalPages},${currentPage - 1})">前一页</a>`;
    } else {
        prevLi.classList.add('disabled');
        prevLi.innerHTML = `<span>前一页</span>`;
    }
    paginationContainer.appendChild(prevLi);

    // 下一页按钮
    const nextLi = document.createElement('li');
    if (currentPage < totalPages) {
        nextLi.innerHTML = `<a href="#" onclick="changePage(${totalPages},${currentPage + 1})">后一页</a>`;
    } else {
        nextLi.classList.add('disabled');
        nextLi.innerHTML = `<span>后一页</span>`;
    }
    paginationContainer.appendChild(nextLi);
}

最终效果如下所示：

四、常见问题排查

在实际开发中，最容易出现的问题是分页失效，即所有数据一次性加载，或者分页条不显示。

1. 现象描述

如果页面下方没有分页条，且表格加载了大量数据，通常意味着分页插件未生效。

2. 解决方案

这通常是因为缺少 MyBatisPlus 的分页拦截器配置。需要在 Spring Boot 配置类中添加拦截器 Bean，指定数据库类型。

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();
        // 指定 PostgreSQL 数据库类型
        i.addInnerInterceptor(new PaginationInnerInterceptor(DbType.POSTGRE_SQL));
        return i;
    }
}

配置完成后重启服务，分页功能即可恢复正常。

五、总结

通过上述步骤，我们完成了一个基于 MyBatisPlus 和 Thymeleaf 的全栈分页功能。重点掌握了分页对象的传递、拦截器的配置以及前后端数据的交互模式。这套方案不仅适用于停水信息发布场景，也可复用于各类后台管理系统的列表展示。遇到分页异常时，优先检查拦截器配置是否生效。