Tip Details Add a Related Tip

Rate as: Positive Negative

A better way to paginate through results

I don't know about you, but I really hate when I have to paginate through results. Most sites really don't put much thought into how this is done. You typically get to select a couple of pages to either side of your current page, and sometimes they let you move from one end of the results to the other. If you are looking for something in the middle, you can look forward to doing a lot of clicking before you get there.

Well, at tipstrs, we came up with what we think is a better approach. You can't really see it in action yet since there aren't enough tips to trigger this sort of pagination, but rest assured, it's ready and waiting once the volume of tips gets large (hint, hint, nudge, nudge).

What we did was to look at this problem in terms of a simple search algorithm, modified slightly so that you get results which look pleasing to the human eye. Examples follow below.

Probably the best simple search algorithm is bisection (http://mathworld.wolfram.com/Bisection.html) . This type of search reaches a solution on the order of log(n) where n in this case is the number of pages. To apply this to the problem of pagination, we use bisection to determine the pages to show to the user between the current page and the upper and lower limits (the lower limit is always the first page). We then recursively reduce the interval until we reach the current page.

However, to make the results more pleasing to the human eye, there are two modifcations:

  1. Instead of straight bisection (where the interval is 0.5), we bisect using the golden ratio (http://en.wikipedia.org/wiki/Golden_ratio) which is ( sqrt(5) - 1 ) / 2.
  2. Instead of just showing the true value that should be used in the bisection, we show numbers that are rounded to some interval where the interval increases as the distance from the current page increases. In our case, the interval is 1 when the distance is 2 or less, it then goes to 2 when the distance is 10 or less, 5 when the distance is 50 or less, etc... (the sequence here is that the intervals are increasing as 1, 2, 5, 10, 20, 50, 100, etc and the distance to which they apply is the interval times the limit of the distance used in the previous interval). Um, okay, this sequence description is pretty bad, but hopefully you can see what I mean, and maybe someone can add a comment to explain what I mean.

Once you roll all that up, you actually end up with something pretty reasonable looking which has the added bonus that it should be much quicker to find a particular page. Here are some examples with various numbers of pages... from the reasonable to the out-of-hand. These should all work, so feel free to click on the lists to see how they change as you simulate paging through them.

Rating: 100% positive, 5 total Votes
Categories: programming web coding web 2.0
Added: on Mar 08, 2007 at 12:33 pm
Added By: tipstr

Comments on this Tip

Add a Comment
pretty cool, but it seems like you should add a rule that enforces that some number of pages adjacent to the current page are always shown. Maybe 3?
– Added by Marcos84 on Mar 08, 2007 at 3:28 pm
Marcos, <<In our case, the interval is 1 when the distance is 2 or less, it then goes to 2 when the distance is 10 >>
– Added by ramsc on Mar 09, 2007 at 7:27 am
Your Comment:
(how to format)
Rate This Tip:

Verify Humanity:
Sorry, we know it's annoying, but please enter the characters shown in the image to the left so that we know you're an actual person and not an evil spammer. Thanks.
       

Related Tips

compressing javascript

100% positive, 0 comments
– Tip added by an anonymous user on Jun 12, 2008 at 3:02 pm

Cool cutting-edge CSS demos

Categories: CSS coding web web 2.0
no ratings, 1 comment - last added on Mar 08, 2007 at 8:17 pm
– Tip added by Marcos84 on Mar 08, 2007 at 3:27 pm

Using functions in conditionals in Smarty

Categories: php programming Smarty web
100% positive, 3 comments - last added on May 21, 2008 at 1:36 pm
– Tip added by rlansky on Aug 10, 2007 at 1:02 pm

Easy way to create .htaccess files

100% positive, 0 comments
– Tip added by an anonymous user on Apr 01, 2008 at 7:57 am

How to Find a Random Date in PHP

40% positive, 0 comments
– Tip added by Walkere on Feb 07, 2008 at 8:25 pm

Something to consider before switching platforms

100% positive, 0 comments
– Tip added by an anonymous user on Sep 25, 2007 at 7:31 pm

Telling when an iframe is done loading

100% positive, 0 comments
– Tip added by an anonymous user on Apr 18, 2008 at 8:05 am

Our best moment was the sunset...

50% positive, 1 comment - last added on Apr 02, 2008 at 5:56 pm
– Tip added by Billy Cenea on Apr 02, 2008 at 5:49 pm

Copyright date on sites

Categories: web programming php Smarty
100% positive, 0 comments
– Tip added by an anonymous user on Mar 11, 2008 at 8:14 am

How to Syndicate an RSS Feed On Your Site

100% positive, 0 comments
– Tip added by Walkere on Feb 09, 2008 at 5:48 pm

How to Create a Random Password in PHP

100% positive, 0 comments
– Tip added by Walkere on Feb 03, 2008 at 9:14 am

Testing regular expressions

100% positive, 0 comments
– Tip added by an anonymous user on Jan 25, 2008 at 2:10 pm

Quick UML reference

Categories: coding programming UML
100% positive, 0 comments
– Tip added by an anonymous user on Dec 24, 2007 at 8:52 am

Avoiding facebook timeout errors

Categories: Facebook programming web
100% positive, 0 comments
– Tip added by an anonymous user on Aug 21, 2007 at 5:21 pm

Referencing methods in PHP usort

Categories: php coding programming
no ratings, 0 comments
– Tip added by an anonymous user on Jun 13, 2008 at 11:18 am

Run web apps on your Mac Desktop

Categories: Mac web web 2.0 desktop
no ratings, 0 comments
– Tip added by an anonymous user on May 23, 2008 at 4:07 pm

Javascript: How to Create a Random Number

0% positive, 0 comments
– Tip added by Walkere on Feb 23, 2008 at 9:49 pm

Migrating from dojo 0.4 to 1.0

no ratings, 0 comments
– Tip added by an anonymous user on Jan 08, 2008 at 12:44 pm

Javascript variable naming

no ratings, 0 comments
– Tip added by an anonymous user on Sep 30, 2007 at 7:28 am

Code for creating Javascript CSS charts

no ratings, 0 comments
– Tip added by an anonymous user on Aug 21, 2007 at 12:23 pm