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.