-
-
Save justinyost/2137554 to your computer and use it in GitHub Desktop.
<?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( | |
'← ' . __('Previous'), | |
array( | |
'escape' => false, | |
'tag' => 'li' | |
), | |
'<a onclick="return false;">← 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') . ' →', | |
array( | |
'escape' => false, | |
'tag' => 'li' | |
), | |
'<a onclick="return false;">Next →</a>', | |
array( | |
'class' => 'disabled next', | |
'escape' => false, | |
'tag' => 'li' | |
) | |
);?> | |
</ul> | |
</div> |
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('← Previous', array(
'class' => 'prev',
'tag' => 'li',
'escape' => false
), '<a onclick="return false;">← 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 →', array(
'class' => 'next',
'tag' => 'li',
'escape' => false
), '<a onclick="return false;">Next →</a>', array(
'class' => 'next disabled',
'tag' => 'li',
'escape' => false
)); ?>
</ul>
</div>
<?php } ?>
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.