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, 8 total Votes
Categories: programming web coding web 2.0
Added: on Mar 08, 2007 at 12:33 pm
Added By: tipstr
Searches: page interval result distance web

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
Well I don't really get it.

Could you please add the code as an example?
It is kind of confusing that the sources I used explained it in totally different ways (and languages).

Thanks

Stefan
– Added by an anonymous user on Nov 01, 2009 at 1:23 pm
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

Detecting if a variable exists in Javascript

100% positive, 2 comments - last added on Oct 21, 2009 at 2:29 pm
– Tip added by an anonymous user on Jul 22, 2008 at 8:31 am

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

Telling when an iframe is done loading

85% positive, 3 comments - last added on May 16, 2009 at 7:48 am
– Tip added by an anonymous user on Apr 18, 2008 at 8:05 am

Length of associative arrays in Javascript

100% positive, 0 comments
– Tip added by an anonymous user on Nov 04, 2008 at 10:13 am

reading select element values in javascript in IE7

100% positive, 0 comments
– Tip added by an anonymous user on Jul 17, 2009 at 1:28 pm

Unable to click in text input boxes on Internet Explorer

100% positive, 2 comments - last added on Aug 07, 2009 at 4:57 pm
– Tip added by Marcos84 on Dec 09, 2008 at 10:49 am

Optional parameters in javascript functions

100% positive, 0 comments
– Tip added by an anonymous user on Jul 30, 2008 at 10:44 am

Referencing methods in PHP usort

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

Easy way to create .htaccess files

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

Getting answers from Experts Exchange

Categories: programming web
100% positive, 0 comments
– Tip added by an anonymous user on Apr 14, 2009 at 10:57 am

Checking for undefined variables in Javascript

100% positive, 1 comment - last added on Jul 14, 2009 at 5:13 pm
– Tip added by an anonymous user on Jan 14, 2009 at 9:47 am

Random number generation

100% positive, 0 comments
– Tip added by an anonymous user on Aug 05, 2008 at 6:49 am

Redirecting in PHP

100% positive, 0 comments
– Tip added by an anonymous user on Jul 17, 2008 at 7:27 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

How to develop extensions for Chrome

no ratings, 0 comments
– Tip added by an anonymous user on Mar 20, 2009 at 6:58 am

Creating charts in PHP

no ratings, 0 comments
– Tip added by an anonymous user on Nov 28, 2008 at 10:37 am

attaching events to nodes in Javascript

no ratings, 0 comments
– Tip added by an anonymous user on Aug 18, 2008 at 11:23 am

animating elements with jQuery

0% positive, 0 comments
– Tip added by an anonymous user on Aug 04, 2008 at 1:46 pm

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