Pagination is a frequent requirement in web development projects. Most PHP developers must have already implementated paging in one form or other in their projects. In this post we will see how to add pagination the easy way using PEAR’s Pager class. Note that in all the posts I use PHP 5.x.x, so if you are still stuck at version 4.x.x, its already time to upgrade.

Its always nice to see some working code first, before getting into the details. So here goes.

require_once 'Pager/Pager.php';
/* We will bypass the database connection code ... */
$sqlQuery = "SOME SQL QUERY";
$result = mysql_query($sqlQuery);
$totalRows = mysql_num_rows($result);
 
$pager_options = array(
'mode'       => 'Sliding',
'perPage'    => 10,
'delta'      => 4,
'totalItems' => $totalRows,
);
$pager = Pager::factory($pager_options);
echo $pager->links;

The above code will return the following pagination links.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 » [10]

Assuming the page where the above code is included is named ‘dataPage.php’; the pager links will have a url like follows:

dataPage.php?pageID=n

where n is the page number.

You can see how easy it is using the Pager class. All the link building is handled by the class. Now lets go into the details.

1. Installation
If you are installing using the Pear installer, enter the following at the command prompt to install Pager.

c:\pear install Pager

Or else you can just download the module from here and then copy it to your Pear includes directory, which will probably be ‘c:\your php installation directory\Pear’.

2. A simple example
In the following example we will create a pagination for a ‘logs’ table.

/* Include the Pear::Pager file */
require_once ('Pager/Pager.php');
 
/* Replace this with your database details */
$connection = mysql_connect("localhost", username, password);
mysql_select_db(database name, $connection);
 
/* First we need to get the total rows in the table */
$result=mysql_query("SELECT count(*) AS total FROM logs", $connection);
$row = mysql_fetch_array($result);
 
/* Total number of rows in the logs table */
$totalItems = $row['total'];
 
/* Set some options for the Pager */
$pager_options = array(
'mode'       => 'Sliding',   // Sliding or Jumping mode. See below.
'perPage'    => 10,   // Total rows to show per page
'delta'      => 4,   // See below
'totalItems' => $totalItems,
);
 
/* Initialize the Pager class with the above options */
$pager = Pager::factory($pager_options);
 
/* Display the links */
echo $pager->links;
 
/* The following code will retreive the result using the pager options */
 
/* The function below will get the page offsets to be used with
the database query. For e.g if we are on the third page then the
$from variable will have the value of '21' (we are showing 10 items per 
page, remember) and the $to variable will have the value of '30'.
*/
list($from, $to) = $pager->getOffsetByPageId();
/* The MySQL 'LIMIT' clause index starts from '0', 
    so decrease the $from by 1 */
$from = $from - 1;
 
/* The number of rows to get per query */
$perPage = $pager_options['perPage'];
 
$result = mysql_query("SELECT * FROM alogs LIMIT $from , $perPage",
$connection);
 
while($row = mysql_fetch_array($result))
{
/* Do something with the query results */
}

In the Pager class there are two modes to display the pagination: Sliding & Jumping.

With Pager in “Sliding” mode the pagination links change smoothly, and the current page is always shown at the center of the “window” (except for the start and end pages). When in Sliding mode the delta option implies how many links to show on the left and right of the current page link.
For e.g with a delta set to ‘3′ the links are displayed as shown below, page 10 being the current page:

[1] « 7 | 8 | 9 | 10 | 11 | 12 | 13 » [13]

With delta option set to ‘4′ the links are shown as below. As you can see there are four links to the left and right of the current page.

[1] « 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 » [13]

With the Pager in “Jumping” mode and delta set to ‘4′ the Pager always shows the same 4 page links while you are on one of these pages.
For e.g with a delta set to ‘4′ the links are displayed as shown below, page 5 being the current page:

[1] << Back 5 6 7 8  Next >> [13]

If you are on page ‘9′ the links displayed are as below:

[1] << Back 9 10 11 12  Next >> [13]

3. More options
You can also change the default separator to any character or image you like.

$pager_options = array(
'mode'       => 'Sliding',
'perPage'    => 10,
'delta'      => 4,
'separator' => ',',
'totalItems' => $totalItems,
);

This will output the following:
[1] « 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 » [13]

If you would like to add images to the ‘next’ and ‘previous’ links, use the following options:

$pager_options = array(
'mode'       => 'Sliding',
'perPage'    => 10,
'delta'      => 4,
'nextImg'    => '<img src="next.png"  />',
'prevImg'    => '<img src="prev.png"  />',
'totalItems' => $totalItems,
);

Which will display the links as shown below:

The default number of spaces before each separator is three. To change the number of spaces use the ’spacesBeforeSeparator’ option. For e.g:

.
.
'spacesBeforeSeparator' => 1,
.

4. Styling
You can style the links by putting them in a div tag and applying a css. A example css and its output is shown below.

Add a div tag:

.
.
echo '<div class="pager">';
echo $pager->links;
echo '</div>';

Apply CSS:

.pager {
    font-family: Arial;
    font-size: 14px;
}
 
.pager a {
    font-family: Arial;
    font-size: 14px;
    text-decoration: none;
    width: 17px;
    height: 17px;
    border: 1px solid #000;
    background-color: #0C74BA;
    text-align: center;
    color: #fff;
}
 
.pager a:hover {
    background-color: #c0c0c0;
}

The output:

That’s it. There are many other options you can use with the Pager class, the details which you can find in the Pager documentation.