We build custom web applications
to grow your business.

How to change cakephp pagination to bootstrap pagination

Cakephp has a really reliable pagination system. However, somethings you may desire to style you pagination a little differently, perhaps with some bootstrap markup. Here are some simple steps you can follow to change your cakephp pagination to a bootstrap theme pagination.

First, locate your paginatorHelper.php file in the core Cake library folder

Cake/lib/Cake/View/Helper

Open that file and look for every instance of "span" and change to "li" tags

Then, in your numbers function (line 715 in cake version 2.3) change

'currentClass' => 'current', 'currentTag' => 'null'

to

'currentClass' => 'active', 'currentTag' => 'a'

On line 481 change 'disabledTag' => 'null' to 'disabledTag' => 'a'

Change all "span" tags to "li"

Then in your view index file (page with pagination) change the pagination code to

<div class="col-md-6 text-right">
    <ul class="pagination">
    <?php
        echo $this->Paginator->prev('<i class="fa fa-chevron-left"></i>',
        array('escape' => false), null, array());
        echo $this->Paginator->numbers(array('separator' => ''));
        echo $this->Paginator->next('<i class="fa fa-chevron-right"></i>',
        array('escape' => false), null, array());
    ?>
    </ul>
</div>

Now, instead of <span> your pagination will be styled with <li> which will give you more flexibility with styling. You can use different front-awesome icons to give it a more modern feel.