Question

我使用g:paginate标记为我的列表页面创建分页链接。我想使用bootstrap pagination无序列表作为标记的UI。我该如何添加？

bootstrap分页标记的工作方式如下：

<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

您可以将此tagLib用于grails

https://github.com/Aasiz/bootspaginate

Answer 2

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

在您的情况下，由于您想使用Bootstrap，我强烈建议您查看引导程序插件在自定义paignation标记以与引导程序一起使用时所执行的操作。我个人使用了与bootstrap非常相似的东西并取得了巨大的成功。

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

我是不熟悉Grails的人，遇到一个相同的问题，试图将样式应用于我的g：paginate。我用JQuery解决了。

首先将我的指令g：paginate封装在一个id为gPaginate的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样式分配给我的课程页面-链接active

简而言之，就是将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();
});

docs

Answer 5

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

Answer 6

以拉胡尔的答案为基础，这就是我为任何寻求选择的人提供的最终结果：

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>

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

6 个答案: