I’ve spent the last few hours investigating how to style the out produced by cakes $paginator helper.
I managed to get a digg style output for my pagination by styling the output produced by default, but because of the number of divs and spans that had to be floated i thought that it would be much easier to style if it were a list.
The default output generated by the Bake scaffolding looks something like this
and the html like
<div class="disabled"><< previous</div>
<span class="current">1</span> |
<span><a href="/cakephp/cms/admin/blog/posts/index/page:2">2</a></span> |
<span><a href="/cakephp/cms/admin/blog/posts/index/page:3">3</a></span>
<a href="/cakephp/cms/admin/blog/posts/index/page:2">next >></a>
</div>
This can be quite easily changed to a list output by using the $options parameter of the $paginator->numbers() function.
In your views where you are using pagination find the call to the $paginator->numbers() function. On my 1.2.6 version of CakePHP it looks like this
Change this to the following
This will then produce output similar to this (it depends what page your on)
<a href="/cakephp/cms/blog/posts/index/page:1"><< previous</a>
<ul class="pagination">
<li><a href="/cakephp/cms/blog/posts/index/page:1">1</a></li>
<li class="current">2</li>
<li><a href="/cakephp/cms/blog/posts/index/page:3">3</a></li>
</ul>
<a href="/cakephp/cms/blog/posts/index/page:3">next >></a>
</div>
To style this digg-stylee you can use the following CSS, just add it to your apps main CSS file.
border:solid 1px #9aafe5;
margin-right:2px;
display:block;
float:left;
padding:3px 4px;
}
ul.pagination li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;
}
ul.pagination a{
border:solid 1px #9aafe5;
margin-right:2px;
display:block;
}
div.paging div.disabled {
border:solid 1px #DEDEDE;
color:#888888;
display:block;
float:left;
font-weight:bold;
margin-right:2px;
padding:3px 4px;
}
ul.pagination .next a,
ul.pagination .previous a {
font-weight:bold;
}
ul.pagination .current{
background:#2e6ab1;
color:#FFFFFF;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
ul.pagination a:link,
ul.pagination a:visited {
color:#0e509e;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
ul.pagination a:hover{
border:solid 1px #0e509e
}
You should then have something that looks like this
And thats it!
Any trouble, leave a comment and we’ll try and sort it out.
The original CSS code for the Digg style links was taken from this post: http://woork.blogspot.com/2008/03/perfect-pagination-style-using-css.html
In your views where you are using pagination find the call to the $paginator->numbers() function. On my 1.2.6 version of CakePHP it looks like this
view source
print?
1 numbers();?>
Change this to the following
view source
print?
1 numbers();?>
I believe you have a typo here…
What do we need to change? the delimeter option?
I have fixed the typo with what you need to change it to
Paginate a Find Result
Hello, im looking for a solution to this little problem of mine, i need to paginate tha data resulting from a custom find, bellow you can see the code that im using, at this point i get all the data that i need, but i”d like to paginate it because sometimes it returns a large amount of data.
Anyone have a suggestion??
THX in advance
PS: if you anything else code wise or me being more specific let me know
//THIS FORCES TO DO THIS “SELECT * FROM table1 LEFT JOIN table2 WHERE…..”
$this->Equipo->unbindModel(array(‘hasMany’=>array(‘Storages’)));
$this->Equipo->bindModel(array(‘hasOne’=>array(‘Storages’=>array(
‘foreignKey’=>false,
‘conditions’=>array(‘Equipo.id_almacen = storages.id’)
)
)
)
);
//IN THIS PART $ DATA GETS THE VALUE OF “SELECT * FROM table1 LEFT JOIN table2 WHERE…..”
$data=$this->Equipo->find(‘all’,array(‘conditions’=>array(
‘part_number LIKE’=>”%”.$this->data['Equipo']['part_number'].”%”,
‘id_almacen LIKE’=>”%”.$this->data['Equipo']['id_almacen'].”%”,
‘equipo_central LIKE’=>”%”.$this->data['Equipo']['equipo_central'].”%”,
‘descripcion LIKE’=>”%”.$this->data['Equipo']['descripcion'].”%”
),
)
);
Have you tried something like this:
$this->paginate = array(
‘conditions’ => array(‘Recipe.title LIKE’ => ‘a%’),
‘limit’ => 10
);
$data = $this->paginate(‘Recipe’);
Taken from: http://book.cakephp.org/view/1232/Controller-Setup