MyBatisPlus 与 Thymeleaf 全栈分页整合实战

数据表设计

以城市停水信息为例，我们需要一张包含时间、地点、原因等字段的表来承载分页数据。表结构及示例数据如下所示：

对应的实例数据预览：

Java 后台分页实现

实体类定义

实体类需要映射数据库表结构，利用 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;
    
    // ... 其他字段省略 ...
}

业务层逻辑

分页的核心在于 Service 层。MyBatisPlus 提供了 Page 对象来处理分页参数，配合 QueryWrapper 构建查询条件。

首先定义接口方法：

IPage<StopWaterInfo> page(Integer pageNum, Integer pageSize, String regionName);

具体实现时，构造 Page 对象并传入 Mapper：

@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);
}

这里我们直接传递当前页码和每页条数，MP 会自动处理 SQL 中的 LIMIT 和 OFFSET 逻辑。

控制层交互

Controller 负责接收前端请求参数，调用 Service 后返回统一结果格式。

@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 获取后端 JSON 数据，动态填充 HTML 表格。以下是加载数据的函数逻辑：

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>`;
        }
    });
}

分页条组件

分页条的生成同样基于后端返回的总页数。为了保持简洁，这里仅展示上一页和下一页按钮。

HTML 结构：

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

JS 渲染逻辑（修复了原代码中的标签错误）：

function renderPagination(totalPages) {
    const paginationContainer = document.getElementById('table-pagination');
    paginationContainer.innerHTML = '';
    if (totalPages <= 1) return;
    
    // 上一页
    paginationContainer.innerHTML += `
        <li ${currentPage === 1 ? 'disabled' : ''}>
            <a href="#" onclick="changePage(${totalPages},${currentPage - 1})" aria-label="Previous">前一页</a>
        </li>
    `;
    
    // 下一页
    paginationContainer.innerHTML += `
        <li ${currentPage === totalPages ? 'disabled' : ''}>
            <a href="#" onclick="changePage(${totalPages},${currentPage + 1})" aria-label="Next">后一页</a>
        </li>
    `;
}

最终效果如下：

常见问题排查

分页不展示

如果在页面底部看不到分页条，且所有数据一次性加载完毕，通常是分页插件未生效。

解决方案

检查是否配置了 MybatisPlusInterceptor。如果没有配置，MyBatisPlus 不会拦截 SQL 进行分页处理。正确的配置如下：

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;
    }
}

配置完成后重启服务，分页条即可正常显示。

总结

通过上述步骤，我们完成了从数据库表设计到前后端分页联调的全过程。MyBatisPlus 的分页能力非常强大，只需简单配置即可支持复杂查询场景；而 Thymeleaf 结合原生 JS 则能灵活控制前端展示。在实际开发中，注意分页参数的校验和异常处理，能让系统更加健壮。