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).

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

Creation

fluid.pager(container, options);

Parameters

container

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

options

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 events:

Event

Type

Description

Parameters

Parameter Description

onModelChange

default

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

Functions

fluid.pager.next();

Selects the next page in the list of pages. If the current page is the last one, no action is taken.

fluid.pager.previous();

Selects the previous page in the list of pages. If the current page is the first one, no action is taken.

fluid.pager.selectPage(pageNum);

Selects a particular page in the list of pages. If the given page number (pageNum) is invalid, or is the same as the current page, no action is taken.

Options

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

Name

Description

Values

Default

selectors

Javascript object containing selectors for various fragments of the Pager component.

The object may contain any subset of the following keys:
  pagerTop
  pagerBottom
  pageLinks
  previous
  next
Any values not provided will revert to the default. 

selectors: {
    pagerTop: ".pager-top",
    pagerBottom: ".pager-bottom",
    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:
  currentPage
  disabled
Any values not provided will revert to the default.

 
styles: {
    currentPage: "current-page",
    disabled: "disabled"
}

pageWillChange

A function that will be called each time a new page has been selected. This function will most likely retrieve data for the selected page, or otherwise update the data.

a function 

pageWillChange: function (link) {
}

Dependencies

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>