Hello, if you are using pagination with cakephp framework and want to change the view of pagination just like twitter bootsrap then you can do this by doing follow changes in you view and css.
We can do it by writing some custom classes in view and you must be using cake PaginatorHelper. All you need to do is to write the custom css, or you can copy it from bootstrap css.
First in your view page you need to write following code for implementing the pagination
<div class="pagination">
<ul>
<?php
echo $this->Paginator->prev( '<<', array( 'class' => '', 'tag' => 'li' ), null, array( 'class' => 'disabled myclass', 'tag' => 'li' ) );
echo $this->Paginator->numbers( array( 'tag' => 'li', 'separator' => '', 'currentClass' => 'disabled myclass' ) );
echo $this->Paginator->next( '>>', array( 'class' => '', 'tag' => 'li' ), null, array( 'class' => 'disabled myclass', 'tag' => 'li' ) );
?>
</ul>
</div>
And the css for bootsrap is
.pagination ul > li.myclass {
float: left;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
border-left-width: 0;
color: #999999;
cursor: default;
background-color: transparent;
}
.pagination ul > li.myclass:first-child {
border-left-width: 1px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
}
.pagination ul > li.myclass:last-child {
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
}
And your pagination will be more beautify and will look like this
0 Comment(s)