Item Pagination
From DesignPatterns
Contents |
Problem
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.
Example
Usage
- 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.
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.
- 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.
Rationale
- Displaying arrow graphics helps differentiate the links and provides larger click targets.
- Unlike in <a href="pattern.php?pattern=searchpagination">Search Pagination</a>, 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.
Related
As Seen On
Source
Yahoo! Pattern Library
