Meaningful Pagination

Why “Meaningful?”

Well, if your results are ordered by last name, which page do you click to see “Phillips” ?

<<Page 1, 2, 3 . . . < 15, 16, 17 > . . . 32, 33 >>

Go on, guess!

Wouldn’t this be easier?

<< Appleby, Brown, Busskirk . . . < Lundy, Numps, Psederton > . . . Wycliffe, Zetos >>

See?  With proper page labels you can find the page in a couple of clicks.

Page numbers only make sense when there is no natural order to the results. A true search (returning results in “relevance” order, say) is forced to use page numbers, because the results don’t have any consistent labels. However, there’s no excuse for making users guess which page number is the “P’s” when we’re filtering and sorting a “Last Name” column.

It’s normal to have some kind of default ordering, so that should be used to label the pages. If we’re talking about people, family name is a good default order. There is a demo at http://search-results-demo.herokuapp.com/, and the default order is family_name.

However, we could use “Supervisor.” If you click the “Supervisor” link in the first table of search terms, you’ll see that the results are paginated by supervisor’s name. (Hover over “Pick Page” in the brown pagination menu.)

pagination

Whatever we use, the pages should be labeled with the value of that field for the first record on the page.

Here’s One Way To Do Meaningful Pagination

Use whatever paginator you like. Kaminari is fine.

We’ll need to know which field the results are sorted by (there’s a little extra code to put the sorted field on the left if it’s an optional field, but that’s another tutorial):

Then we can get the contents of the first record on each page.

It’s simpler just to use the same page length and select the first field on each page.

So, the controller looks like this:

Then, it’s just a matter of creating the navigation display.

The view calls for the pagination navigation display if there is more than one page of results

There’s a little helper method:

which calls the actual pagination navigation partial:

And, finally, style it all:

There! It’s a bit of work, but it really makes user life easier.

Advertisements
This entry was posted in Information, Ruby on Rails, tutorial. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s