MyBatisPlus 与 Thymeleaf 全栈分页实战指南

2. 示例表结构介绍

以城市停水信息数据为例。表结构如下：

对应的实例数据如下：

二、Java 后台分页实现

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 对象的使用。

@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 对象时，将当前页和每页大小传入，配合 QueryWrapper 进行查询。

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 分页集成

1. 分页表格展示

前端通过 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. 分页条集成

同步设置分页条元素。

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

3. 成果展示

最终效果如下：

四、可能遇到的问题

1. 分页不展示

如果页面没有分页条，且数据全部加载，通常是分页插件未配置。

2. 问题解决

检查后台是否配置了分页拦截器。

@Configuration
public class MybatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor i = new MybatisPlusInterceptor();
        i.addInnerInterceptor(new PaginationInnerInterceptor(DbType.POSTGRE_SQL));
        return i;
    }
}

配置完成后重新运行，分页条即可正常显示。

五、总结

本文介绍了 MyBatisPlus 与 Thymeleaf 的全栈分页整合方案，从环境搭建到前后端交互，再到常见问题处理。希望能为你的开发工作提供参考。