Custom Web Applications to Grow Your Business

(256) 429-8145

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


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'


'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">
        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());

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.