如何改变 g:paginate 的外观和感觉

Question

我正在使用g:paginate 标签为我的列表页创建分页链接。我想为标签的 UI 使用引导程序 pagination 无序列表。我该如何添加？

引导分页标签的工作方式如下：

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

我正在像这样使用g:paginate 标签

<g:paginate controller="mycontroller" action="list" total="${total}" />

Answer 1

我是 grails 的新手，我遇到了同样的问题，试图将样式应用于我的 g:paginate。我用 JQuery 解决了。

首先将我的指令 g:paginate 封装在一个 id 为 gPaginate this 的 div 中，以便获取它拥有的子项，即转到我的指令的每个元素。

<div id="gPaginate">
        <g:paginate maxsteps="4" controller="reservations" action="searchReservations" total="${totalReservations}" max="5" params="${parameters}" prev="&lt;" next="&gt;" />
</div>

<nav id="pagination2" aria-label="Paginación">
    <ul id='gPaginate2' class='pagination'></ul>
</nav>

然后我创建了我的列表，并将指令的每个子项添加到另一个 div 中，其中 ul 的 id 为 gPaginate2 以通过添加

来验证

并验证项目（子项）是否包含 currentStep 样式，然后分配我的课程页面链接活动

简而言之，它是将 paginate 指令的项目传递给另一个，但使用您想要的样式，最后隐藏 g: paginate 我希望它对您有用，我将 JQuery 代码留给您。

$(document).ready(function() {
    $('#gPaginate').children().each(function(index,html) {
        if($(this).hasClass('currentStep')){
            $('#gPaginate2').append("<li  id='item"+index+"'  class='page-item active'>");
        }else{
            $('#gPaginate2').append("<li id='item"+index+"' class='page-item'>");
        }
        $(this).clone().appendTo($("#item"+index));
    });

    $('#gPaginate2').children().each(function() {
        $(this).children('a').removeClass("step");
        $(this).children('a').addClass("page-link");

        $(this).children('span').removeClass("step gap");
        $(this).children('span').addClass("page-link");
    });
    $('#gPaginate').hide();
});

result

Answer 2

以 Rahul 的回答为基础，以下是我为任何寻找选择的人最终得出的结论：

CSS：

.pagination span, .pagination a {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-decoration: none;
    background-color: whitesmoke;
    transition: background-color .3s;
    border: 1px solid #ddd;
    padding: 5px;
    text-align: center;
    border-radius: 2px;
    margin: 0 1px;
    color: rgba(0, 0, 0, 0.54);
    font-weight: bold;
}

.step.gap {
    display: none;
    /* ^ if we don't want to see the dots*/
}

.nextLink, .prevLink {

}

.pagination .currentStep {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

a:hover:not(.active) {
    background-color: #ddd;
}

HTML：

<div class="pagination">
    <g:paginate total="${totalCount}" next="&gt;" prev="&lt;"
                controller="search" max="${max}"
                params="${params}"></g:paginate>
</div>

Answer 3

.step {
    padding: 10px;
    color: black;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

.nextLink {
    padding: 10px;
    color: black;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

.prevLink {
    padding: 10px;
    color: black;        
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

.currentStep {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

.step.gap {
    display: none;
}

.step:hover:not(.active) {
    background-color: #ddd;
}

用于 grails 3.8 为<g:paginate next="Next" prev="Back" maxsteps="0" controller="Users" action="userv" total="${totalCount}" params="${params}"/>

Answer 4

一种选择是使用 main.CSS (asset:stylesheet) 中的分页 CSS，它是 grails 默认提供的，并且已被编写为与 g:paginate 一起使用。它使分页的外观和感觉更好，无需任何额外的努力。

Answer 5

您可以将此 tagLib 用于 grails

https://github.com/Aasiz/bootspaginate

Answer 6

如果提供的结构不适合您的需要，最好的解决方案是使用您自己的自定义实现（覆盖默认值）覆盖分页标记。否则，显然，使用 CSS 对其进行样式设置是一种选择。

在您的情况下，由于您想使用 Bootstrap，我强烈建议您查看 bootstrap 插件在自定义 paignation 标签以与 bootstrap 一起使用方面做了什么。我个人使用与 bootstrap 非常相似的东西取得了巨大成功。