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

The Pager component can be driven in a variety of modes dependent on requirements. For the Infusion 1.5 release, what was previously a single monolithic component named fluid.pager has been factored into three components fluid.pager, fluid.table and fluid.pagedTable to make the different areas of responsibilities clearer. The component fluid.pager takes care of the pure functionality of paging - when used by itself it manages a pager bar holding a set of links which can be navigated to select different pages - however in this mode the component's user takes complete responsibility for rendering the UI which is being paged. The component fluid.pagedTable allows the framework to take responsibility for rendering the paged content using the Pager's built-in integration with Fluid's Renderer, and supports rendering of dynamic multi-page data-driven tables. The component fluid.table could be used just to render a single table without any paging, but this functionality has not received development attention in this release.

Subcomponents of fluid.pager

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

• PagerBar
  • PageList
  • PreviousNext
• Summary
• PageSize

Subcomponents of fluid.pagedTable

When used via the creator function named fluid.pagedTable which in addition to paging, manages paged content stored in a rendered table, the Pager component acquires the following additional subcomponents (the subcomponents listed under fluid.pager proper all remain available with the same configuration options):

• 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

fluid.pager(container, options);      // EITHER
fluid.pagedTable(container, options); // OR