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.
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.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.
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:
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):
(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.
fluid.pager(container, options); // EITHER
fluid.pagedTable(container, options); // OR