从Grails 2迁移到Grails 5后paginate标签分页显示异常

Grails 3及以后版本重构了标签库实现，g:paginate默认不再生成Grails 2时代的<div>/<ul>/<li>结构，转而输出零散的<span>和<a>标签，这会导致依赖旧结构的CSS样式失效。以下是几种可行的解决方式：

1. 自定义paginate标签模板（推荐，复用原有样式） #

在项目中创建自定义标签模板，覆盖默认的g:paginate渲染逻辑，生成和Grails 2一致的HTML结构：

• 在grails-app/views/templates/tags目录下新建paginate.gsp文件（目录不存在则手动创建）
• 将以下内容复制到该文件中（可根据需求调整细节）：

<%@ taglib prefix="g" uri="http://grails.org/tags/g" %>

<div class="pagination ${class ?: ''}" aria-label="Page navigation">
    <ul class="pagination">
        <!-- 上一页按钮 -->
        <g:if test="${previousPage}">
            <li>
                <g:link action="${action}" params="${params}" params="[offset: pageOffset - max, max: max, sort: sort, order: order]">
                    <span aria-hidden="true">&laquo;</span>
                </g:link>
            </li>
        </g:if>
        <g:else>
            <li class="disabled">
                <span aria-hidden="true">&laquo;</span>
            </li>
        </g:else>

        <!-- 页码列表 -->
        <g:each in="${pageNumbers}" var="i">
            <g:if test="${i == pageNumber}">
                <li class="active"><span>${i}</span></li>
            </g:if>
            <g:else>
                <li>
                    <g:link action="${action}" params="${params}" params="[offset: (i - 1) * max, max: max, sort: sort, order: order]">${i}</g:link>
                </li>
            </g:else>
        </g:each>

        <!-- 下一页按钮 -->
        <g:if test="${nextPage}">
            <li>
                <g:link action="${action}" params="${params}" params="[offset: pageOffset + max, max: max, sort: sort, order: order]">
                    <span aria-hidden="true">&raquo;</span>
                </g:link>
            </li>
        </g:if>
        <g:else>
            <li class="disabled">
                <span aria-hidden="true">&raquo;</span>
            </li>
        </g:else>
    </ul>
</div>

• 保存后重启应用，g:paginate标签将自动使用该模板生成HTML，原有CSS样式无需修改即可生效。

2. 调整CSS适配新结构 #

如果不想修改标签模板，可以针对Grails 5生成的新结构编写CSS：
Grails 5默认生成的分页结构大致如下：

<span class="pagination pull-right">
    <a href="..." class="prev">&laquo;</a>
    <span class="current">1</span>
    <a href="...">2</a>
    <a href="..." class="next">&raquo;</a>
</span>

编写适配的CSS示例：

.pagination {
    display: flex;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagination a, .pagination span {
    padding: 6px 12px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #337ab7;
}
.pagination .current {
    background-color: #337ab7;
    color: #fff;
    border-color: #337ab7;
}
.pagination .prev, .pagination .next {
    border-radius: 4px;
}
.pagination a:hover {
    background-color: #eee;
}

3. 确认框架依赖兼容性 #

如果项目使用Bootstrap等UI框架，检查Grails 5默认引入的框架版本是否与原有样式兼容：

• 在build.gradle中确认Bootstrap依赖版本，若存在版本差异，可手动指定原有版本（例如保留Bootstrap 3以匹配旧样式）
• 确保页面中正确引入了框架的CSS文件，避免因依赖缺失导致样式异常

内容的提问来源于stack exchange，提问作者John Moore