Item Pagination

Working Solution · Last modified July 15, 2009

When there is too much data (or too long a list of items) to display on a single page, break the list of items into a sequence of pages.

Provide previous and next links to enable people to navigate through the paginated data, as well as links to the first and last pages in the set.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

The user needs to view data items from a potentially large set of sorted data that will not be easy to display within a single page.

When to Use This Pattern

  • There is more information than can comfortably fit within one screen.
  • The items of interest can be usually found on the first few pages.
  • If the data needs to be explored deeply, consider displaying the content in a scrolled area instead.

What's the Solution?

  • Break the list of items into a sequence of pages.
  • Provide links to access the previous and next pages of information.
  • Provide links to jump to the first and last pages in the set.
  • Provide information about what type of object the user is browsing.
  • Illustration of item pagination control


  • Provide information about the set of objects the user is currently viewing.
    Use the form: "[$ObjectName]s [DisplayedItemRange] of [TotalItems]"
  • Present links in the following order: First, Previous, Next, Last.
  • Use graphical arrows to increase the target size of the links.
  • Show the displayed states of controls when they are unavailable.

Why Use This Pattern?

  • Displaying arrow graphics helps differentiate the links and provides larger click targets.
  • Unlike in Search Pagination, the controls are visible at all times during paging (even when disabled). This prevents distraction to the user that would occur when removing unavailable controls during paging.

Accessibility

  • Do not hyperlink the page that is currently active, i.e. if on the page three, the number 3 should not be hyperlinked.