A good pager

I made a list of features that a good data pager should have, implemented them in my search engine and made many screenshots of pagers in other web applications.


When implementing my self-made search engine phinde, I needed a way to split the search results onto multiple pages.

At first I used the standard sliding pager provided by PEAR's HTML_Pager but found it to be lacking usability.

States of a standard sliding pager

Let's look at a standard sliding pager that is configured to show data on 5 page numbers of a total of 9:

FirstPrev123...NextLast
FirstPrev1234...NextLast
FirstPrev12345...NextLast
FirstPrev...23456...NextLast
FirstPrev...34567...NextLast
FirstPrev...45678...NextLast
FirstPrev...56789NextLast
FirstPrev...6789NextLast
FirstPrev...789NextLast

This is not ideal.

Definition of "good"

To me, a good pager must be based on the sliding pager and have the following additional features:

  1. Prev and Next links need to be on the outside because they are used most.

    Many standard pagers have First and Last links outside.

  2. Prev and Next need to be big so they are easier to hit.

    Too many pagers I've seen use < and > that are not easy to click.

  3. No duplication.

    A standard sliding pager on page 1 starts with FirstPrev12, in which First and 1 do the same.

    When following rule #1, they are next to each other: PrevFirst12. This means the pager "phase" that most users see is inefficient because it contains buttons with same functionality.

    It's better to ditch the First and Last buttons altogether, but always show buttons for page numbers 1 and the last number.

  4. Only show "..." when more than one page is hidden.

    I've often seen the following pager state: 12...45. The 3 should be shown instead of the dots because it takes the same space.

  5. The position of the Next button should be stable across pages.

    I want to be able to click on the first page on Next, use PageDown on page 2 and click the mouse again without moving to get to page 3. That's very handy for quickly evaluating the results of many pages.

States of the good pager

The good pager looks like this, also with 5 pages being shown of 9:

Prev123...9Next
Prev1234...9Next
Prev12345...9Next
Prev123456...9Next
Prev123456789Next
Prev1...456789Next
Prev1...56789Next
Prev1...6789Next
Prev1...789Next

This is implemented in phinde. Have a look at search.cweiske.de/?q=php&page=7.

I'm showing the first and last two pages there, but I'm not sure yet if that's better than showing only one.

phinde's pager
phinde's pager

Other pagers

A collection of pagers in other web applications.

CircleCI

circleci.com pager
CircleCI.com's pager: Prev and Next buttons only.

dockerui

dockerui pager
Apart from Prev and Next, the page size selection is available in a dropdown menu.

GitHub

github pager
GitHub does everything right.

GitLab

gitlab pager
GitLab's pager has none of the "good pager" features.

Heise online

heise.de pager
heise.de's pager only has Prev and Next.

JIRA

atlassian jira pager
JIRA has one of the worst pagers I've ever seen. That's what you get for buying enterprise software.

MediaGoblin

mediagoblin pager
MediaGoblin's pager has two rows: The first with Prev and Next only, the second contains actual pager numbers.

Piwik

piwik pager
Piwik 2.x pager has Prev and Next only, but the search field next to them.

Postfixadmin

postfixadmin pager
Postfixadmin has a very nice pager without page numbers. A user can actually select the correct page immediately.

Stackoverflow

Stackoverfloe pager
Stackoverflow also does everything right.

Woltlab Burning Board

Woltlab Burning Board pager
Woltlab has a nice pager implementing all the good parts. The "..." is clickable and opens a popup.
Burning Board page selection popup
When clicking on "...", a popup opens.
Old woltlab pager
(Very old) Burning Board version 2 pager, which is really bad.

XKCD

xkcd pager
The xkcd.com pager features a Random button.

Written by Christian Weiske.

Comments? Please send an e-mail.