Bootstrap pagination with CakePHP pagination helper

Question

I'm trying to get CakePHP's pagination helper to play nicely with bootstrap. That is, I want my pagination elements to look like bootstrap's but generated by CakePHP.

At the moment I've got this on my view page:

<?php
echo $this->Paginator->numbers(array(
    'before' => '<div class="pagination"><ul>',
    'separator' => '',
    'currentClass' => 'active',
    'tag' => 'li',
    'after' => '</ul></div>'
));
?>

Which produces the following markup:

<div class="pagination">
    <ul>
        <li class="active">1</li>
        <li><a href="/test/posts/page:2">2</a></li>
        <li><a href="/test/posts/page:3">3</a></li>
    </ul>
</div>

The problem is, because the active page (1 in this case) doesn't have an <a> element in the <li> tag, it's not displaying correctly on the page (see here: https://i.stack.imgur.com/VKRlW.png).

I can't seem to find anything on the Cookbook that mentions anything that would fix this.

Can this even be fixed?

jruzafa · Answer 1 · 2014-02-09T15:07:43.593

62

I've used the generic functions of cake php html needed to bootstrap.

Gist code: https://gist.github.com/jruzafa/5302941

<div class="pagination pagination-large">
    <ul class="pagination">
            <?php
                echo $this->Paginator->prev(__('prev'), array('tag' => 'li'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
                echo $this->Paginator->numbers(array('separator' => '','currentTag' => 'a', 'currentClass' => 'active','tag' => 'li','first' => 1));
                echo $this->Paginator->next(__('next'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
            ?>
        </ul>
    </div>

edited Feb 09 '14 at 15:07

answered Apr 03 '13 at 16:47

jruzafa

4,156
1
24
26

4

This is the best answer, just copied to my page and worked perfect with bootstrap css, thanks ! – dav Jun 19 '13 at 17:19
4

This works perfectly but for Bootstrap 3 you need to put the class="pagination" in the UL, not in the DIV – Joseph Sep 13 '13 at 06:33
1

Is there some way to prevent the ellipsis from appearing off the side and de-centering the whole paginator? – user984976 Dec 09 '13 at 02:58
if you are using newer versions of cake you need to style the ellipsis (those 3 dots indicating separation between page 1 and the rest). just add `'ellipsis' => '
...

Mauro Zadunaisky

Mar 25 '14 at 14:17

I have tried it. It work but the current page index show outside the pagination numbers why??? I am using the cakephp 2.3 and bootstrap 3.0 – May 12 '14 at 09:53

'disabledTag' was added in CakePHP 2.3 – Christian Strang Aug 08 '14 at 19:06

score 7 · Answer 2 · answered Jan 16 '13 at 02:47

This is actually specifically mentioned in the "Creating page number links" section of the "Paginator" documentation:

currentTag Tag to use for current page number, defaults to null. This allows you to generate for example Twitter Bootstrap like links with the current page number wrapped in extra ‘a’ or ‘span’ tag.

In your case, you'll want to use 'currentTag' => 'a'. However, keep in mind that this option was added in CakePHP 2.3, so if you're using a version older than that, it won't work.

score 6 · Accepted Answer · answered Jan 15 '13 at 21:56

6

All you really need to do is add a CSS class for the current and disabled items to match. Here's one I use for my project (it's basically copied and pasted from the bootstrap CSS file).

.pagination .current,
.pagination .disabled {
    float: left;
    padding: 0 14px;

    color: #999;
    cursor: default;
    line-height: 34px;
    text-decoration: none;

    border: 1px solid #DDD;
    border-left-width: 0;
}

This gives it the same style as the a tags.

answered Jan 15 '13 at 21:56

jeremyharris

7,884
22
31

I'm not sure what you mean. I changed my `currentClass` to `active` but it wasn't fixed. Do you mean I should modify the bootstrap.css file directly? – James Dawson Jan 15 '13 at 22:30
1

You don't need to modify the bootstrap CSS, just add this to your own CSS file. – jeremyharris Jan 15 '13 at 22:32
@jeremyharris Although your solution will work, it isn't necessary as of CakePHP 2.3. See my answer. – Adam Taylor Jan 16 '13 at 02:47

score 2 · Answer 4 · answered Dec 20 '14 at 17:03

The best I could get:

PHP:

<div class="paging btn-group page-buttons">
    <?php
    echo $this->Paginator->prev('< ' . __d('users', 'previous'), array('class' => 'btn btn-default prev', 'tag' => 'button'), null, array('class' => 'btn btn-default prev disabled', 'tag' => 'button'));
    echo $this->Paginator->numbers(array('separator' => '', 'class' => 'btn btn-default', 'currentClass' => 'disabled', 'tag' => 'button'));
    echo $this->Paginator->next(__d('users', 'next') . ' >', array('class' => 'btn btn-default next', 'tag' => 'button'), null, array('class' => 'btn btn-default next disabled', 'tag' => 'button'));
    ?>
</div>

CSS:

button:hover > a {
    text-decoration: none;
}

Result:

Paginator

.paging {margin: 10px;}
button:hover > a {text-decoration: none;}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>

<div class="paging btn-group page-buttons">
 <button class="btn btn-default prev disabled">&lt; anterior</button>
 <button class="disabled btn btn-default">1</button>
 <button class="btn btn-default"><a href="/cakephp/users/index/page:2">2</a></button>
 <button class="btn btn-default next"><a href="/cakephp/users/index/page:2" rel="next">próximo &gt;</a></button>
</div>

score 2 · Answer 5 · answered Apr 19 '15 at 16:18

You need to add an anchor tag between "li" tags for active page, try this code :

<nav>
    <ul class="pagination">
    <?php
    echo $this->Paginator->prev('&laquo;', array('tag' => 'li', 'escape' => false), '<a href="#">&laquo;</a>', array('class' => 'prev disabled', 'tag' => 'li', 'escape' => false));
    $numbers = $this->Paginator->numbers(array('separator' => '', 'tag' => 'li', 'currentLink' => true, 'currentClass' => 'active', 'currentTag' => 'a'));
    $numbers = preg_replace("#\<li class=\"active\"\>([0-9]+)\<\/li\>#", "<li class=\"active\"><a href=''>$1</a></li>",$numbers);
    echo $numbers;
    echo $this->Paginator->next('&raquo;', array('tag' => 'li', 'escape' => false), '<a href="#">&raquo;</a>', array('class' => 'prev disabled', 'tag' => 'li', 'escape' => false));
    ?>
    </ul>
</nav>

score 1 · Answer 6 · answered Aug 08 '14 at 19:36

Try this if you are using Twitter Bootstrap 3.0 and CakePHP 2.0 or 2.1:

css (somewhere in your css, not in the bootstrap css!)

ul.pagination li.active {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.428571429;
    text-decoration: none;
    background-color: #fff; 
    border: 1px solid #ddd;
}

CakePHP View (where you want to display the pagination bar)

<ul class="pagination">
    <?php
        echo ($this->Paginator->hasPrev()) ? $this->Paginator->prev('«', array('tag' => 'li'), null, null) : '<li class="disabled"><a href="#">«</a></li>';
        echo $this->Paginator->numbers(array('separator' => false, 'tag' => 'li'));   
        echo ($this->Paginator->hasNext()) ? $this->Paginator->next('»', array('tag' => 'li'), null, null) : '<li class="disabled"><a href="#">»</a></li>';
    ?>
</ul>

score 1 · Answer 7 · answered Dec 28 '14 at 21:50

For bootstrap 2 with font awesome and full pagination you can use that :

And add a little hack to your css or less

        <div class="pagination">
    <ul>
        <?php
        ## PAGINATION
        echo $this->Paginator->first('<i class="fa fa-angle-double-left"></i>', ['escape' => false, 'tag' => 'li']);
        //
        //
                echo $this->Paginator->prev('<span><i class="fa fa-angle-left"></i></span>', [
            'class' => 'prev enabled',
            'tag' => 'li',
            'escape' => false,
        ], null, [
            'class' => 'prev disabled',
            'tag' => 'li',
            'escape' => false,
        ]);
        echo $this->Paginator->numbers(
        [
            'separator' => '',
            'tag' => 'li',
            'modulus' => 20,
            'escape' => false,
            'currentTag' => 'span',
            'currentClass' => 'active',
        ]);
        //
        echo $this->Paginator->next('<span><i class="fa fa-angle-right"></i></span>', [
            'class' => 'next enabled',
            'tag' => 'li',
            'escape' => false,
        ], null, [
            'class' => 'next disabled',
            'tag' => 'li',
            'escape' => false,
        ]);
        echo $this->Paginator->last('<i class="fa fa-angle-double-right"></i>', ['escape' => false, 'tag' => 'li']);
        ?>

    </ul>
    <div class="pull-right paginationCounter">
        <?php
        echo $this->Paginator->counter(
        [
            'class' => 'pull-right',
            'format' => '{:page} / {:pages} pages, {:count} results',
        ]);
        ?>          
    </div>
</div>

   /* Pagination bootstrap 2 add */
.pagination ul > li.active{
    float: left;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #fff;
    border-color: #ddd;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    line-height: 20px;
    padding: 4px 12px;
    text-decoration: none;
    cursor: default;
}

.pagination ul > li a[rel='first'], 
.pagination ul > li a[rel='last'], 
.pagination ul > li.prev a, 
.pagination ul > li.next a {
    height: 17px;
    padding-top: 7px;
}

score 1 · Answer 8 · answered Feb 24 '17 at 09:05

<ul class="pagination">
<?php
  echo $this->Paginator->prev('&laquo;', array('tag' => 'li', 'escape' => false), '<a href="#">&laquo;</a>', array('class' => 'prev disabled', 'tag' => 'li', 'escape' => false));
  echo $this->Paginator->numbers(array('separator' => '', 'tag' => 'li', 'currentLink' => true, 'currentClass' => 'active', 'currentTag' => 'a'));
  echo $this->Paginator->next('&raquo;', array('tag' => 'li', 'escape' => false), '<a href="#">&raquo;</a>', array('class' => 'prev disabled', 'tag' => 'li', 'escape' => false));
?>
</ul>

Welcome to SO. Please not that code only answers do not fulfill the standards of SO. See http://stackoverflow.com/help/how-to-answer — Uwe Allner, Feb 24 '17 at 09:26

score 0 · Answer 9 · answered Feb 01 '14 at 17:37

    if ($this->Paginator->hasPage(null, 2)) { 
    echo '<tfoot>';
    echo '<tr>';
    echo '<td colspan="7" class="text-right">';
    echo '  <ul class="pagination pagination-right">';
    echo $this->Paginator->first('<span class="glyphicon glyphicon-fast-backward"></span> First', array('escape' => false, 'tag' => 'li'), null, array('escape' => false, 'tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a'));
    echo $this->Paginator->prev('<span class="glyphicon glyphicon-step-backward"></span> Prev', array('escape' => false, 'tag' => 'li'), null, array('escape' => false, 'tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a'));
    echo $this->Paginator->numbers(array(
        'currentClass' => 'active',
        'currentTag' => 'a',
        'tag' => 'li',
        'separator' => '',
    ));
    echo $this->Paginator->next('Next <span class="glyphicon glyphicon-step-forward"></span>', array('escape' => false, 'tag' => 'li', 'currentClass' => 'disabled'), null, array('escape' => false, 'tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a'));
    echo $this->Paginator->last('Last <span class="glyphicon glyphicon-fast-forward"></span>', array('escape' => false, 'tag' => 'li', 'currentClass' => 'disabled'), null, array('escape' => false, 'tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a'));

    echo '  </ul>';
    echo '<p>'.$this->Paginator->counter(array('format' => 'Page {:page} of {:pages}, showing {:current} records out of {:count} total.')).'</p>';
    echo '</td>';
    echo '</tr>';
    echo '</tfoot>';    
}

score 0 · Answer 10 · answered May 29 '14 at 13:40

you can achieve this without any css to add :

<?php
echo $this->Paginator->numbers(array(
        'before' => '<ul class="pagination">',
        'separator' => '',
       'currentClass' => 'active',
        'currentTag' => 'a',
        'tag' => 'li',
        'after' => '</ul>'
    ));
?>

score 0 · Answer 11 · answered Apr 15 '15 at 13:19

#pagination > li.current {
    z-index: 2;
    color: #ffffff;
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.428571429;
    text-decoration: none;
    border: 1px solid #dddddd;
    margin-left: 0;
    color: #999999;
    z-index: 2;
    color: #ffffff;
    cursor: default;
    background-color: #428BCA;
    border-color: #428BCA;
}
#pagination > li.prev.disabled,#pagination > li.next.disabled {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.428571429;
    text-decoration: none;
    border: 1px solid #dddddd;
    margin-left: 0;
    color: #999999;
    cursor: not-allowed;
    background-color: #ffffff;
    border-color: #dddddd;
}
.pagination > li > a{
    color: #428BCA;
}

Welcome to stackoverflow. Answers consisting entirely of code aren't as useful as answers including some explanation of the code, and how the differences between the answer code and the OP's code are key to functionality. Please consider improving your answer. — Politank-Z, Apr 15 '15 at 13:29

Rafał Myszyński · Answer 12 · 2018-06-06T16:00:07.137

So many answers, but non handle ellipsis. Below you can find full version, no custom CSS needed.

CakePHP v2, Bootstrap v3

<ul class="pagination">
    <li><?php echo $this->Paginator->prev('Previous', array('escape' => false, 'tag' => 'li'), null, array('escape' => false, 'tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a')); ?></li>
    <li><?php echo $this->Paginator->numbers(array('separator' => '', 'currentTag' => 'a', 'currentClass' => 'active', 'tag' => 'li', 'first' => 1, 'ellipsis' => '<li class="disabled"><a>...</a></li>')); ?></li>
    <li><?php echo $this->Paginator->next('Next', array('escape' => false, 'tag' => 'li', 'currentClass' => 'disabled'), null, array('escape' => false, 'tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a')); ?></li>
</ul>

The resulting code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="pagination">
 <li class="prev">
  <a href="/users/page:8" rel="prev">Previous</a>
 </li>
 <li>
  <a href="/users">1</a>
 </li>
 <li class="disabled">
  <a>...</a>
 </li>
 <li>
  <a href="/users/page:5">5</a>
 </li>
 <!-- more numbers here... -->
 <li class="active">
  <a>9</a>
 </li>
 <!-- more numbers here... -->
 <li class="next">
  <a href="/users/page:10" currentclass="disabled" rel="next">Next</a>
 </li>
</ul>

Bootstrap pagination with CakePHP pagination helper

12 Answers12

Linked