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 4 Next »

This documentation refers to the latest trunk version of the Pager code.

Pager Overview

The Pager component allows users to break up long lists of items into separate pages.

Markup assumptions

Unlike many other Fluid Components, the Pager makes certain assumptions about the structure of the HTML markup it is applied to:

  1. The entire pager is contained within some kind of container element.
  2. Within that container, there are two 'pager bar' elements, each containing:
    • an element containing page links
    • a 'next' element
    • a 'previous' element

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

On This Page
Still need help?

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


Creating a Pager

Note: These convenience methods are not yet implemented.

Markup-driven

createPager(componentContainerId);

Data-driven

createPager(jsonObject);

Constructor

fluid.Pager(componentContainerId, options);

Parameters

componentContainerId

The componentContainerId parameter is the ID of the root DOM node of the Pager markup.

options

The options parameter is an optional collection of name-value pairs that configure the Pager:

Name

Description

Values

Default

selectors

 

 

selectors: {
    pagerTop: ".pager-top",
    pagerBottom: ".pager-bottom",
    pageLinks: ".page-link",
    previous: ".previous",
    next: ".next"
}

styles

 

 

styles: {
    currentPage: "current-page"
}

pageWillChange

 

 

pageWillChange: function (link) {
    // AJAX call here
}

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 isthe same as the current page, no action is taken.

  • No labels