How to change look and feel of g:paginate

Question

I'm using the g:paginate tag to create pagination links for my list page. I'd like to use the bootstrap pagination unordered list for the UI of the tag. How can I add that?

The bootstrap pagination tag works like this:

<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>

I'm using the g:paginate tag like this

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

Countersink

Answer 1

The best solution is to override the pagination tag with your own custom implementation (that overrides the default) if the structure provided doesn't suit your needs. Otherwise, obviously, styling it with CSS is an option.

In your case, since you want to use Bootstrap I highly recommend you look at what the bootstrap plugin does in regards to customizing the paignation tag for use with bootstrap. I've personally used something very similar with bootstrap with great success.

Nath

here's a sample implementation for Bootstrap for whoever wanders onto this question in the future: gist.github.com/OsaSoft/b01bf54dc70a75c0d980bbbf13d7c360 – Bootstrap

Answer 2

You can use this tagLib for grails

https://github.com/Aasiz/bootspaginate

Devonna

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;
}

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

Ctenidium

Thank you for this nice solution. I've also added .nextLink:hover:not(.active) { background-color: #ddd; } .prevLink:hover:not(.active) { background-color: #ddd; } as a tweak in order to get consistency all over the buttons. – Canaigre

Answer 4

I am new to grails and I ran into the same problem, trying to apply a style to my g:paginate. I solved it with JQuery.

First encapsulate my directive g:paginate within a div with id gPaginate this in order to get the children it has, that is, go to each of the elements of my directive.

<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>

Then I created my list and I was adding each child of my directive in another div with an ul to which its id is gPaginate2 to validate by adding a

and validating if the item (child) contains the currentStep style then assign my class page- link active

In short it is to pass the items of the paginate directive to another one but with the style you want and finally hide the g: paginate I hope it serves you I leave you the JQuery code.

$(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

Kovach

Answer 5

One option is to use the pagination CSS present in main.CSS (asset:stylesheet) which is default provided by grails and has been written to work with g:paginate. It makes pagination look and feel far better without any extra effort .

Swivet

Answer 6

Building on Rahul's answer, here's what i ended up with for anyone looking for options:

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>

Eutectoid