Paging Element for Twitter Bootstrap and CakePHP 2.0+

paging.ctp

<?php $span = isset($span) ? $span : 8; ?>
<?php $page = isset($this->request->params['named']['page']) ? $this->request->params['named']['page'] : 1; ?>
<div class="pagination">
	<ul>
		<?php echo $this->Paginator->prev(
			'&larr; ' . __('Previous'),
			array(
				'escape' => false,
				'tag' => 'li'
			),
			'<a onclick="return false;">&larr; Previous</a>',
			array(
				'class'=>'disabled prev',
				'escape' => false,
				'tag' => 'li'
			)
		);?>
		
		<?php $count = $page + $span; ?>
		<?php $i = $page - $span; ?>
		<?php while ($i < $count): ?>
			<?php $options = ''; ?>
			<?php if ($i == $page): ?>
				<?php $options = ' class="active"'; ?>
			<?php endif; ?>
			<?php if ($this->Paginator->hasPage($i) && $i > 0): ?>
				<li<?php echo $options; ?>><?php echo $this->Html->link($i, array("page" => $i)); ?></li>
			<?php endif; ?>
			<?php $i += 1; ?>
		<?php endwhile; ?>
		
		<?php echo $this->Paginator->next(
			__('Next') . ' &rarr;',
			array(
				'escape' => false,
				'tag' => 'li'
			),
			'<a onclick="return false;">Next &rarr;</a>',
			array(
				'class' => 'disabled next',
				'escape' => false,
				'tag' => 'li'
			)
		);?>
	</ul>
</div>

Can pass $span to the element will tell it how many pages to span - ie number of pages to display between the previous/next buttons.

Since Paginator doesn't insert the "a" tag when disabled or active, Bootstrap's .pagination css breaks. You could use null for the disabled titles and add the following to your site-specific css:

.pagination li.disabled,
.pagination li.active {
  color: #999999;
  background-color: transparent;
  cursor: default;
  float: left;
  padding: 0 14px;
  line-height: 34px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-left-width: 0;
}
.pagination li.disabled:first-child {
  border-left-width: 1px;
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}
.pagination li.disabled:last-child {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

The gist code passes in an "a" tag for the disabled next/previous links, following from the CakePHP Book http://book.cakephp.org/2.0/en/core-libraries/helpers/paginator.html#creating-jump-links

The Standard Bootstrap CSS will work just fine.

Screenshots of examples using this exact code, with only the Boostrap CSS styles

http://www.flickr.com/photos/jtyost2/7042236071/
http://www.flickr.com/photos/jtyost2/7042236089/

.paging {
    height: 36px;
    margin: 18px 0;
}
.paging span{
    float: left;
    padding: 0 14px;
    line-height: 34px;
    border-right: 1px solid;
    border-right-color: #DDD;
    border-right-color: rgba(0, 0, 0, 0.15);
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.paging span:hover, .paging span a:hover, .paging span.current {
    background-color: #C7EEFE;
    text-decoration:none;
}

Above additional CSS works on default output of CakePHP, without any modifications in helper file.

Great stuff. Worked right out of the box. Thank you.

This came in handy. Thanks for the element.

It worked! Thank you. :)

Thanks!

Worked like a charm. Thanks. :)

Paginator has all options to create a bootstrap structure.

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.

CakePHP: 2.3.1
Bootstrap: 2.3.1

<?php
$params = $this->Paginator->params();
if ($params['pageCount'] > 1) {
?>
<div class="pagination">
 <ul>
<?php
    echo $this->Paginator->prev('&larr; Previous', array(
        'class' => 'prev',
        'tag' => 'li',
         'escape' => false
    ), '<a onclick="return false;">&larr; Previous</a>', array(
        'class' => 'prev disabled',
        'tag' => 'li',
        'escape' => false
    ));
    echo $this->Paginator->numbers(array(
        'separator' => '',
        'tag' => 'li',
        'currentClass' => 'active',
        'currentTag' => 'a'
    ));
    echo $this->Paginator->next('Next &rarr;', array(
        'class' => 'next',
        'tag' => 'li',
        'escape' => false
    ), '<a onclick="return false;">Next &rarr;</a>', array(
        'class' => 'next disabled',
        'tag' => 'li',
        'escape' => false
    )); ?>
 </ul>
</div>
<?php } ?>