Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 36 Next »

This documentation refers to the latest trunk version of the Pager code. For information related to the v0.5 released version, please see Pager API - v0.5.

Pager Overview

The Pager component allows users to break up long lists of items into separate pages. In the Fluid 0.6 release, the Pager, as well as operating a 100% markup-driven mode, also features integration with Fluid's [Renderer] to support rendering of dynamic multi-page data-driven tables. However, the Renderer integration as of this release should be considered experimental.

Markup assumptions

The Pager makes certain assumptions about the mark-up:

  1. The entire pager must be contained within a container element.
  2. Within that container, there are one or two 'pager bar' elements, each containing:
    • any number of page links
    • optionally, a 'next' element and a 'previous' element
    • optionally, a dropdown control for selecting the page size

The Pager uses CSS selectors to access these various components. Default selectors are assumed, which can be overriden (see options below).

On This Page
See Also
Still need help?

Join the fluid-talk mailing list and ask your questions there.


fluid.pager(container, options);



The container parameter is is a selector, a single-element jQuery, or a DOM element specifying the root DOM node of the Pager markup.


The options parameter is an optional collection of name-value pairs that configure the Pager, as described below in the Options section.

Supported Events

The Pager component fires the following event:





Parameter Description



Fired whenever the pager's "model" changes - that is, whenever there is a change to the displayed range of data for the pager, caused by a change to the page index, page size or underlying data

(newModel, oldModel, that)

newModel is a structure of type PagerModel and represents the update state of the model. oldModel is a snapshot of this model before the event was fired. that is the overall component that

In addition, in this release, the Pager also supports the following events, which are however implementation-specific, and part of a transitional implementation strategy before the adoption of the Data Binder and BeanInvalidationModel:





Parameter Description



Fired when the implementation wishes to initiate the change of state corresponding to the selection of a new page


A structure which includes either the member pageIndex representing the new required page index, or relativePage representing an offset from the current page position



Fired when the implementation wishes to initiate the change of state corresponding to an updated page size for the visible range


an integer representing the desired new page size


The following options to the creator function can be used to customize the behaviour of the Pager component:

Unknown macro: {style}

/* copied from Confluence main-actions.css */
.mytable, .mytable td, .mytable th

Unknown macro: { border}

.mytable pre

Unknown macro: { overflow}

selectorsJavascript object containing selectors for various fragments of the Pager component. The object may contain any subset of the following keys:
Any values not provided will revert to the default.
  selectors: {
    pagerBar: ".pager-top",
    pagerBarSecondary: ".pager-bottom",
    summary: ".pager-summary",
    pageSize: ".pager-page-size"
pagerBar The overall "Pager Bar" subcomponent which is responsible for the previous/next, page size and page links controls A subcomponent specification {type: functionName, options: pagerBarOptions}. Typically the functionName should remain as the default of "fluid.pager.pagerBar". Configuration of the options structure for PagerBar itself is described in its own section below. {type: "fluid.pager.pagerBar", options: null}
summary A small textual control representing an overall "summary" of the paging state. Typically holds a message reading similarly to "30-31 of 139 items" A subcomponent specification
summary: {type: "fluid.pager.summary", options: {
            message: "%first-%last of %total items"
pageSize Configuration for a control allowing the user to select the number of items shown per page A subcomponent specification "fluid.pager.directPageSize"
bodyRenderer Used only if the pager is being run in "data-driven" mode. Contains a subcomponent specification for a component capable of responding to model update events in order to render the visible page segment A subcomponent specification "fluid.emptySubcomponent"
modelFilter Used only if the pager is being run in "data-driven" mode. Specifies a function signature which will be used to perform the "filtering" portion of the data preparation work required by the bodyRenderer with respect to preparing the visible page view. The modelFilter is a function (model, pagerModel) -> data, where model is the value held in options.dataModel, pagerModel is the pager's model, and the return value is a segment of the data model in a form suitable to be supplied directly to the bodyRenderer. A basic implementation is supplied in fluid.pager.directModelFilter function or function name fluid.pager.directModelFilter

that organization

Where the component that is constructed by a line such as

var that = fluid.pager(component, options);

, the returned object will have the following top-level organisation in terms of subcomponents and model:

The Pager's Model


The "model" of the pager - note to distinguish carefully between the pager's model, and the data model of the user. The pager's model consists of the state of the paging component, which specifies the page index position, overall data range and page size. The user's data model consists of the actual data being paged, which is stored in that.options.dataModel. This, the pager's model, should be treated as read-only via this interface, and should only be manipulated by use of the component's event system.

The pager model is laid out as following:








The current index of the page, expressed 0-based amongst the range of pages




The number of "items" which may be shown on a page




The total count of "items" in the underlying user's data model




The limit of the range in which pageIndex is expressed




The limit of the range of items shown on the current page represented by the model

(pageLimit is not actually stored within the model at any point, but is supplied a computation function computePageLimit to match computePageCount by which pageCount is derived from the primary fields.

Subcomponents - PagerBar

The PagerBar is the most substantial subcomponent of the pager, and contains controls operating links for page navigation - these may include previous/next, first/last as well as an array of numbered page links. The dropdown control for selecting page size, PageSize may be physically nested within the same container as the markup managed by the PagerBar, but is not logically part of the same control.

Two PagerBars may be configured for a Pager control, under the names pagerBar and pagerBarSecondary which were mentioned in the top-level options structure above. These may appear at arbitrary positions in the overall markup (top/bottom, etc.), however, the pagerBar is primary in that if one of these bars is omitted, it must be the pagerBarSecondary.

The options structure for a PagerBar is as follows:

previousNextA subcomponent, nested within the PagerBar, which operates the pair of previous/next links for navigating by single pagesA subcomponent specification"fluid.pager.previousNext"
pageListA subcomponent, nested within the PagerBar which operates a list of links allowing quick random access to individual pages. This listens for changes in the pager's state, and updates the activity and appearance of the link list. It may also additionally take responsibility for rendering the link list dynamically, in response to the state of the user's data model Standard implementations are fluid.pager.directPageList, which simply accepts a pre-rendered set of page index links which are already in the DOM, and simply takes charge of styling and binding, and fluid.pager.renderedPageList which can operate a dynamic strategy to render the page index links, in addition to the responsibilities of directPageList "fluid.pager.directPageList"
selectorsJavascript object containing selectors for various fragments of the PagerBar subcomponent. The object may contain any subset of the following keys:
Any values not provided will revert to the default. Each of these selectors is expected to identify link components, most likely of tag <a>
selectors: {
  pageLinks: ".page-link",
  previous: ".previous",
  next: ".next"
styles Javascript object containing CSS style names that will be applied to the Pager component. The object may contain any subset of the following keys:
Any values not provided will revert to the default.
styles: {
  currentPage: "current-page",
  disabled: "disabled"


The Pager dependencies can be met by including the minified Fluid-all.js file in the header of the HTML file:

<script type="text/javascript" src="Fluid-all.js"></script>

Alternatively, the individual file requirements are:

<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="fluid/Fluid.js"></script>
<script type="text/javascript" src="fluid/Pager.js"></script>

  • No labels