website design - Pagination Best Practice

I am not sure on the best way to handle some pagination I need to perform on a table that could potentially get very big (5,000 rows plus).

My first question is should the amount of rows shown per page be dictated only by the layout, or should the amount of pages also come into consideration. For example should I say < 1000 show 20 rows, >= 1000 show 30 rows?

The next question is how best to navigate between the pages, assuming the user has filtered the table as much as they can and they are left with 50 pages of information, should they get an input box to jump to page 45? Or should skip(1) skip(5) buttons suffice? At this time I don't know how the end user is going to use the tables so I am unsure as to what option to let them try first.

Finally, does anyone have any good examples of pagination done right they could share? I am always looking for good reference material!

Answer

This may or may not be pagination done right, but here is how I do pagination in my web app:

|< First, << Previous, Page [5] of 12, Next >>, Last >|

The outer four options are links, while the Page [5] of 12 is a form, with the [5] as an input field. For users with JavaScript enabled, I hide the submit button and submit the form on the unfocus event or enter keypress. The user has the option on how many rows they want to display, which they can select from a dropdown menu: 10, 20, 50, 100, All. I also provide sorting and filtering of the results in addition to pagination, though that may not make sense in every situation.

Edit:

Here's a snippet from a mockup of our web app to give you a better idea. In this version, the words have been omitted from buttons, but appear as a tooltip on hover after a slight delay. However, you may find that keeping the words will result in a higher level of usability.

A few other things to point out:

• The "First" and "Previous" buttons have been disabled because it's the first page.


• The blue indicates active buttons (I will have to run this particular theme through a color checker to make sure that colorblind users can tell a difference).


• The buttons always remain, even if they are disabled. This gives the interface consistency.


• I chose an input field rather than a dropdown select box because of scale. If you have 3000 pages, you don't want to scroll down to find page


• The pagination is grouped in a singular visual component to indicate similarity in purpose.