Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Section
Column
width60%

Pager Overview

The Pager component allows users to break up long lists of items into separate pages. Users can decide if they want paging and how many items should be presented per page.

Renderer Use

While the Pager can be used in a 100% markup-driven mode, it is recommended to use the data-driven mode. This mode uses the Pager's built-in integration with Fluid's Renderer, and supports rendering of dynamic multi-page data-driven tables.

NOTE: At this time, the Renderer-based data-driven mode is NOT the default mode for the Pager. To use the data-driven mode, you must configure certain options. For specific information on how to do this, see #Options for the Data-driven Pager below. In future releases, the data-driven mode will be the default mode, and less of this configuration will be required.

Subcomponents

The Fluid Pager, like many Fluid components, is really one interface to a collection of Subcomponents that work together to provide a unified user experience. In particular, the Pager uses the following subcomponents:

  • PagerBar
    • PageList
    • PreviousNext
  • Summary
  • PageSize
  • RangeAnnotator
  • BodyRenderer

(For a description of these subcomponents, and an example showing how they might fit together, see Pager Subcomponents.)

These subcomponents are instantiated and managed by the Pager, but each has options that can be used to configure and customize it. These subcomponents, and their options, are described individually below.


Creation

Code Block
javascript
javascript
fluid.pager(container, options);
Column
Panel
borderColor#321137
bgColor#fff
titleBGColor#aab597
titleStatus
borderStylesolid
titleStatus

This component is in Preview status

Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
borderStylesolid
titleOn This Page
borderStylesolid
Table of Contents
maxLevel5
minLevel2
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
borderStylesolid
titleSee Also
borderStylesolid
Include Page
Still Need Help panel
Still Need Help panel

...