In this tutorial, we will go through various techniques of using CakePHP Paginator helper. At the end of it, you will be able to use CakePHP pagination helper to accomplish your desired paginator (pagination links) easily.

Table Of Content

  1. Preparation
  2. Basic usage of Paginator helper
  3. Custom 1 - <ul> list based page numbers
  4. Coming Next

Content

1.Preparation

  • Before you start this tutorial, please make sure you have understood Pagination component and have experience using it, if you don't, then this tutorial is not for you, and we suggest you read CakePHP official docs about pagination from Cook Book. This tutorial focuses on Paginator helper, and shows you how to use it to implement various pagination links.

  • Download CakePHP, in this tutorial we are using CakePHP 1.3.2.

2.Basic usage of Paginator helper

Normally, when we use default options of Paginator, as covered in Cook Book, we do:

<!-- Shows the page numbers -->
<?php echo $paginator->numbers(); ?>
<!-- Shows the next and previous links -->
<?php echo $paginator->prev('« Previous', null, null, 
	array('class' => 'disabled')); ?>
<?php echo $paginator->next('Next »', null, null,
	array('class' => 'disabled')); ?> 
<!-- prints X of Y, where X is current page and Y is number of pages -->
<?php echo $paginator->counter(); ?>

Let us look into the code line by line, so $paginator->numbers() will return page numbers similarly as below. As we can see, page numbers are wrapped inside <span> tags. Current page's <span> is added Css class "current". Clickable page number is wrapped inside a <a> tag. And <span> tags are separated by |.

<span class="current">1</span> | <span><a href="page-link">2</a></span>

$paginator->prev('« Previous', null, null,array('class' => 'disabled')) will return a previous navigation link similar as below. As we can see, when there is no previous page, the navigation text which is defined as the first paramter is wrapped inside a <span> tag, and it is added the fourth parameter as the Css class("disable"). When there are previous pages, the navigation text is wrapped inside a <a> tag with default Css class "prev", and it is again wrapped inside a <span> tag.
if there is no previous page:

<span class="disabled">« Previous</span>

if there are previous pages:

<span><a href="page-link" class="prev">« Previous</a></span>

$paginator->next('Next »', null, null,array('class' => 'disabled')); return content almost as same as $paginator->prev('« Previous', null, null,array('class' => 'disabled')). It shows below:
if there is no next page:

<span class="disabled">Next »</span>

if there are next pages:

<span><a href="page-link/page:2" class="next">Next »</a></span>

At last, let us take a look at $paginator->counter(), this will basically return the page counter text as below. As we can see, it is default simple text of "current page of total page".

1 of 3

 

3.Custom 1 - <ul> list based page numbers

It is very common to have <ul> based page number in our applications, so how to achieve following markup using paginator?

<ul>
<li><a href="page-link/page:2" class="prev">« Previous</a></li>		
<li><a href="page-link/page:1">1</a></li>
<li><a href="page-link/page:2">2</a></li>
<li class="current">3</li>								
<li class="disabled">Next »</li>	
</ul>

Firstly, let us create <li> based Prev and Next buttons. To do this, refer to CakePHP API, we will need to pass some parameters to functions prev() and next() as below. As we can see, we have passed 'tag'=>'li' into second and fourth paramter of both functions, what that 'tag' does is to tell CakePHP to wrap the page link into the defined parameter, which is 'li' here.

<?php echo $paginator->prev('« Previous',array('tag'=>'li'),null, 
				array('class' => 'disabled','tag'=>'li'));
?>

<?php echo $paginator->next('Next »', array('tag'=>'li'), null, 
				array('class' => 'disabled','tag'=>'li'));
?>

We pass options to second paramter as options for active link, and fourth parameter as options for disabled link. We want to wrap both active and disabled link into </li>, that is why we are passing 'tag'=>'li' into both second and fourth parameters here.

Next what we need to do is to generate </li> based page numbers, it is very similar to what we have done above, and it is even simple, we do as below. As we can see, we passed in the same option 'tag'=>'li' into paramter, because paga numbers are not separated by active and disabled, one parameter does the trick. Additionaly, we have passed in 'separator'=> '', this option will overite the default | separator to be blank, because we don't want anything in between <span> tags.

<?php echo $paginator->numbers(array('separator' => '','tag'=>'li')); ?>

In summary, what we have done to achieve our task is:

<ul>
<?php 
echo $paginator->prev('« Previous', array('tag'=>'li'), null, 
	array('class' => 'disabled','tag'=>'li'));
echo $paginator->numbers(array('separator' => '','tag'=>'li')); 							
echo $paginator->next('Next »', array('tag'=>'li'), null, 
	array('class' => 'disabled','tag'=>'li'));
?>
</ul>

 

Coming Next

There are definitely much more customization we can, and we need to do when using Paginator helper, we will be adding more content here, and also please let me know what you want to know when using Paginator helper, we will be very happy to publish something useful for you.
If you like our tutorial, please follow us on Twitter and help spread the word. We need your support to continue.