Skip to main content link. Accesskey S

Paging

A paging component is a navigational structure for data that allows your application to show subsets of the data and users to get to other subsets (pages) of the data.

Directionality:

Data goes in here....

Classes

  • lotusPaging - this is the main class, the rest of the styling is done using html tags
  • 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.

Basic Implementation

The top paging bar generally looks like the top sample. (See code snippet.)

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.)

Examples

Sample HTML

Sample HTML - 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.

See also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.