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>

.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 } ?>