This documentation is currently being moved to our new documentation site.
Please view or edit the documentation there, instead.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.
Pager API
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 and its subcomponents, as described below in the fluid:Options section.
Supported Events
The Pager component fires the following events:
Event | Type | Description | Parameters | Parameter Description |
|---|---|---|---|---|
| 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 |
|
|
| default | Fired when the pager's | (Links Component Tree) | The component tree for the links - this will be an array of components with ids beginning with the prefix |
| default | Fired after any rendering of the Pager triggered by a model change, such as a page change, change in number if items per page, etc. This event fires after the initial rendering of the Pager. |
| The overall Pager component object |
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 new ChangeApplier
Event | Type | Description | Parameters | Parameter Description |
|---|---|---|---|---|
| default | 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 |
| default | 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.
Options
The following options to the creator function can be used to customize the behaviour of the Pager component:
Options available to fluid.pager:
There are also options available to select and configure each of the subcomponents used by the Pager. These options are listed here, and their contents are described in detail in the relevant sections below.
Options available to the data-driven Pager fluid.pagedTable
The Pager can be used in a 100% markup-driven mode via the grade fluid.pager described above. It can also be used in a data-driven mode using the grade fluid.pagedTable:
fluid.pagedTable(container, options);
When Pager is configured for data-driven paging several other top-level Pager options and subcomponents become available:
Configuration of subcomponents available from fluid.pagedTable:
The ColumnDef structure
The configuration option columnDefs takes the form of an array of ColumnDef objects, one configuring each required column of the rendered table (a renderer must be in use).
NOTE: Understanding the ColumnDef object will be greatly facilitated by looking at the Renderer documentation.
The following table explains the layout and function of the fields in the ColumnDef structure:
Component expansion
As this component is cloned, once for each cell in its column, it will undergo various forms of expansion - the most important of these is with respect to the special placeholder value fluid.VALUE. This may be placed where any string or UIBound component is expected, and will be expanded to hold either the value or binding of the correct column cell, with respect to the wildcard path specified in valuebinding. A further form of expansion also allows interpolation of read-only values in the middle of literal string, by use of a Smarty-like variable syntax. The string ${VALUE} will expand to the same value as fluid.VALUE, whereas general EL expressions of the form which are supported for valuebinding are also supported.
Here is a sample of a ColumnDef object with a UILink type cell showing both forms of substitution:
{key: "user-link",
valuebinding: "*.userDisplayName",
components: {
target: "/dev/sn/profile.html?user=${*.userId}",
linktext: fluid.VALUE},
sortable:true
}
Here, the linktext field will be bound to *.userDisplayName, whereas the URL target will be formed by interpolation with a value from *.userId. In this case both of these EL paths will be prefixed by any value in dataOffset before fetching.
Subcomponents available to both fluid.pager and fluid.pagedTable
PagerBar subcomponent
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.
Subcomponent Name: fluid.pager.pagerBar
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.