Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to do page navigation for many, many pages? Logarithmic page navigation
    primarykey
    data
    text
    <h2>What's the best way of displaying page navigation for many, many pages?</h2> <p>(Initially this was posted as a how-to tip with my answer included in the question. I've now split my answer off into the "answers" section below). </p> <hr> <p>To be more specific:</p> <p>Suppose you're displaying a set of records to the user, broken up into fixed-size pages (like the results of a Google search, for example). If there are only a few pages, you can display a page navigation area at the end of the results that might look like this:</p> <p>[ &lt;&lt; ] [&lt;] 1 2 3 <strong>4</strong> 5 6 7 8 9 10 11 12 13 [ > ] [ >> ]</p> <p>But this quickly becomes unweildy if there are much more than 20 or 30 pages of results.</p> <p>Sometimes you'll see things like this:</p> <p>[ &lt;&lt; ] [&lt;] ... 665 666 667 668 <strong>669</strong> 670 671 672 673 ... [ > ] [ >> ]</p> <p>or this:</p> <p>[ &lt;&lt; ] [&lt;] 1 2 3 ... 667 668 <strong>669</strong> 670 671 ... 845 846 847 [ > ] [ >> ]</p> <p>but in both cases, navigating to anywhere in the middle of the "..." sections would take many, many mousclicks. Sometimes an input box for entering the page number directly is provided; otherwise (assuming we're talking about a webpage here) the savvy user is likely to look at the URL to see if they can edit it directly.</p> <p>What would be nice would be to have a pagination display that lets the user reach any page in only a few mouseclicks, without having ridiculously many links.</p> <p>How would that best be achieved?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload