This tutorial is brought to you by the kind folks at Stranger Studios. We encourage you to check out our other projects.

Digg-Style Pagination

READ FIRST: I've released a my own modularized version of the pagination code. If you just want to use the function and aren't interested in its implementation, use this code.

OTHER VERSIONS: Some awesome folks have created some great stuff based on this code.

This page will explain how to build a pagination scheme similar to the one found at uses the same scheme. To be fair, I don't know who first introduced this style of pagination; I just noticed it at Digg first.

Please post any questions or comments at this blog post.


This example is pulling items from our Stranger Studios portfolio. Two items are shown for each page. You can use the pagination object to browse through the pages.

Here is a demo just showing the pagination without any results.

To see a real world example, checkout this list of Oregonian wines at

How Do I Do That?

The main features of this pagination scheme are as follows:

  1. The pagination object has a "previous" and "next" button which takes the user to the next page. The previous button is disabled on the first page. Similarly, the next button is disabled on the last page.
  2. The pagination object will always display links to the first two pages and the last two pages of the set.
  3. The pagination object will always display links to the first x ($adjacents in the code) pages before and after the current page.
  4. The pagination object will only show at most 5+2x links (first two + prior x + current page + next x + last two). All links not shown will be replaced by ...

Ok, now that we have that out of the way. Let's build this thing. Our pagination scheme consists of two parts: the CSS and the code to draw the object.


Copy this code into your stylesheet or view source here (change extension to .css on your server).

The Code

This part is a little trickier. Below is an implementation in PHP. A good programmer should be able to transpose the code to any other language. If you do, let us know.

There is some potential to take advantage of redundancies, and a definite potential to abstract this into a class or function for general use. I've left these for future exercises.

If you have any trouble implementing the code, let me know and I will try to help out.

Copy the code below into your php file or view source here (change extension to .php to run on your server).

UPDATE: Or download this php code, which includes a function to make using this much easier. Instruction on how to use the function are at the top of the page.


Please post any questions or comments at our corresponding blog post. If you are interested in having Stranger Studios implement a pagination system for your project, contact us here.

A Perl Version by Andrew

Andrew sent me a Perl version of the pagination algorithm. This one is also modularized (how it should be, and how we do it at WineLog now). Below is the email and code Andrew sent me.

Hi Jason,

Thanks for posting your PHP pagination code! I translated it to Perl and modified it and it's very nice.

In my display loop, I show an element if:
($count > ($page - 1) * $numToShow && $count <= $page * $numToShow)

Then I call the modified pagination code:
$output = getPagination(2, $numToShow, $page, $count, $thisScript, '&m=an_extra_mode');

Here is the translated and modified code:

Copy the code below into your cgi script or view source here (change extension to .cgi, etc to run on your server).