Paging

Data goes in here....

Top Paging Variation

Classes

• lotusPaging - this is the main class, the rest of the styling is done using html tags.
• lotusPagingTop - this is an optional class that triggers different styling on the top paging bar.
• lotusInlineList - although this is a general class for inline lists, it is used in the paging control and the default padding between inline list items is adjusted for the paging component.
• lotusView (new) - the class that goes on a lotusInlinelist that displays viewing options.

Basic Implementation

Add lotusPagingTop to the top paging bar.

Variations

The bottom paging bar can be the same as the top bar, with or without the middle paging elements, or can look like the bottom sample, with the jump-to-page control. (See code snippet.)

Accessibility

Put the navigation landmark role on the lotusPaging div. Add an aria-label="Primary Paging" (or "Secondary Paging" for bottom paging controls) to describe this navigation. Each navigation landmark must have a unique label.

Use an aria-label and a title tag (text will show on hover) to make options clearer to users. (See the code samples.) For example, without the aria-label, JAWS will read the text "1-10" as "one dash one zero" while it reads "1 - 10" as "one dash ten". Setting aria-label and title to "Showing items 1 through 10 of 93" makes that text clearer to users.

The code order doesn't read the same as the visual order. If that is a concern, use the tabIndex property to modify keyboard order.

Mark up the "Show" controls as an ARIA Tool Bar. Put role="presentation" on the li tags. (See code sample.)

Examples

• Paging with different bottom and top bar
• Top paging variation example

Sample HTML

Sample HTML - bottom paging bar

Sample HTML - top paging bar variation

CSS (paging.css)

Theme CSS (pagingTheme.css)

The only thing that has changed in the paging bar over time is the background styling. Early in the design it was determined not to use characters (like > or >) next to the paging and next controls because they wouldn't be read properly by a screen reader.

January 2011: Added accessibility information.

September 2011: Added lotusChooser display anchor and the lotusPagingTop class so the top and bottom paging bars can be styled differently.

February 20, 2012: Replaced lotusChooser with lotusView as an inline list.

June 13, 2012: Updated Accessibilty section and aria-labels on component samples to indicate primary vs secondary paging.