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!

    *Had this been an actual question*, you would have gotten a lot more upvotes, likes and answers.

    @nocomprende Since you and Patrick McElhaney cannot tell what is being asked, how do you know that it would have gotten even more upvotes and answers, had it been an "actual question"? What would the actual question ask?

    @SantiBailors I was commenting on the fact that a question that got 5 answers and plenty of upvotes and likes was closed a year later as being not a real question. It seems like a bit of historical liberty to me. If it was not a real question, couldn't we tell that right away? If it took a year to figure it out, maybe the definition of Real Question is suspect? Maybe the overall group gets to decide what is a real question and what isn't, not just one editor. If one person can decide, they should do it before lots of people put effort in to it.

    @nocomprende I agree with all your points, I had your comment backwards, I had interpreted it as wanting to reinforce the idea that this is not a real question.

    "God is an Iron"

  • Virtuosi Media

    Virtuosi Media Correct answer

    11 years ago

    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.

    Virtuosi Media's Pagination Example

    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.

    Saw this approach in Atlassian Bamboo - and it really works :) The problem? It's not the convention to input the desired page number via a form when using a pagination control :( But, hey, users will have to learn and design has to move forward.

    It is really the only negative side of this approach.. to have to "type" a number. But i think the point with the dropdown, it can be also used parallel with this approach. For example i can also make a dropdown select box only if page count < 30. And if not input field. If you mostly have cases where you have max 30 pages anyway, this brings a benefit.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM