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 52 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 overridden (see Options below).


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.

See Also
Still need help?

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

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

For more information about events, see Events for Component Users.


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
strings: {
  last: " (last)"
events See the Supported Events above for more information.
events: {
  initiatePageChange: null,
  initiatePageSizeChange: null,
  onModelChange: null

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.

Options for PagerBar

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"

Subcomponents - Summary

The purpose of the summary component is to manage a small textual control representing an overall "summary" of the paging state. This typically holds a message reading similarly to "30-31 of 139 items"

Options for Summary

message A string template for formatting the summary message. This may make use of substitution variables %first, representing the index position of the first visible item, %last, representing the index position of the last visible item, and %total, being the total length of the user's data model A string template "%first-%last of %total items"

Subcomponents - PageSize

The PageSize component operates a control which allows the user to select the number of items shown at one time on a visible page of the control.

The default implementation of the PageSize component exposes no configuration of its own. Its assumption is that the tag identified by the pageSize selector configured at the top-level component represents a standard HTML <select> control which has been populated with a list of the desired range of page sizes. By default as listed above, the type of the PageSize subcomponent is initialised to "fluid.pager.directPageSize".

Subcomponents - ModelFilter and BodyRenderer

The component configured as bodyRenderer, to the knowledge of the overall Page component, simply has the role of a standard listener to onModelChanegd. However, the special function of this subcomponent, if configured, is to perform the work of locating an HTML template suitable for rendering the actual paged view contents, and responding to changes in the pager's model for the purpose of keeping the rendered view updated.

The work of rendering the paged body is split into two parts - firstly, the part of preparing the direct (JSON) representation of the data to be renderered. This is performed by the top-level component configured as modelFilter. A ModelFilter is simply a function, whose signature and purpose is documented as part of the top-level component options - it need not actually make use its argument model to filter the data view, but there is a standard implementation fluid.pager.directModelFilter that simply takes the model (configured as the top-level that.options.dataModel) and extracts just those rows identified by the pagerModel.

The standard implementation of the BodyRenderer in fluid.pager.selfRender locates and makes use of the configured top-level ModelFilter in its listener implementation. The ModelFilter is invoked to do its work of preparing the data suitable for this event cycle, which is then handed to the [Fluid Renderer] for rendering. Other implementations of BodyRenderer might use other rendering schemes.

Options for fluid.pager.selfRender

cells A strategy to be user for rendering an individual row of the table data. If this takes the string value "explode", the standard fluid.explode strategy is used, assuming that each field in the data item maps onto a simple UIInput peer whose rsf:id agrees with its name. Future versions of the pager will support custom row renderers. "explode" None

Subcomponent - PageList

The PageList subcomponent is actually a second-level subcomponent of the overall Pager - it is nested within the PagerBar component configured at top level. PageList is responsible for managing, and optionally rendering, a list of page link controls which allow quick random access to different page views.

Two implementations are provided - fluid.pager.directPageList (the default) which simply accepts a pre-rendered and unchanging list of page links present in the DOM at startup, and fluid.pager.rendered.PageList which treats the links in the DOM as a template, and accepts further configuration in order to generate a link list dynamically as the number of view pages alters.

The configuration for fluid.pager.directPageList is taken entirely from the pageLinks selector configured into the top-level components.

Options for fluid.pager.renderedPageList

selectors Allows configuration of a selector name root, which defines the root of the document section which is to form the HTML template for the rendered page links. This cooperates with the top-level selector pageLinks which is intended to identify individual nodes under this root which correspond to the actual links Selector value for root
selectors: {
  root: ".pager-links"
linkBodyAn optional selector which allows an "offset" to be specified between the nodes identified by pageLinks and the actual <a> tag to be the peer of the page index and UILink control. A selector string "a"
pageStrategy A configurable strategy for generating the list of page indices which should have links generated for them, given a particular range of available page indices A function, with signature function(pageCount) -> Array[Number], which accepts the total number of pages which are viewable, and returns an array of the indices which should be supplied with page links fluid.pager.everyPageStrategy, which simply generates an entry, and hence a link, for every page in the range


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.3.1.js"></script>
<script type="text/javascript" src="fluid/Fluid.js"></script>
<script type="text/javascript" src="fluid/Pager.js"></script>

  • No labels