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

Question

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

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，我强烈建议您查看 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}"/>