...

...

Step 1: Prepare your markup

The Pager component works with the raw data that you want paged and lays it out according to a template you provide in your mark-up.

...

• This code uses the Fluid Skinning System (FSS) for some layout, in particular, the "fl-force-left" and "fl-container-flex" classes.
• This code assumes you have a CSS file containing the various "demo-..." CSS classes for styling the markup.

Selectors

Next, you will need to let the Pager know which pieces of mark-up are to be used for what. This is accomplished though an id or class on an element. In particular, you'll need to identify

...

This should get us started.

...

Step 2: Write the script, setting the options

You'll need to create a file, say pagersetup.js, to contain your initialization script: the script you write to apply the Pager to your roster. Let's start with this:

...

The Pager supports a number of options that can be set to configure the behaviour of the component. The options argument to the creator function is a JavaScript object containing the various options, some of which may be objects themselves. Let's go over the options we'll need to set for our Pager (for detailed information about all supported options, see the Pager API page).

bodyRenderer

The bodyRenderer option allows you to specify and configure the subcomponent used to render the actual data. The default body renderer is the self-renderer, fluid.pager.selfRender. This renderer uses the Infusion Renderer to populate your template with your data. We only need to tell the body renderer where the root of your template is.

...

var opts = {
    bodyRenderer: {
        type: "fluid.pager.selfRender",
        options: {
            selectors: {
                root: ".demo-pager-table-data"
            }
        }
    }
};

dataModel

The dataModel option contains the actual data that you want paged, in the form of a pure-date JavaScript object. The structure of the object can take any form: paths expressed in component trees and configuration are expressed relative to this model.

...

var opts = {
    bodyRenderer: {...},
    pagerBar: {...},
    dataModel: {
        "entityPrefix": "membership",
        "membership_collection": [
            {
                "memberRole": "Instructor",
                "userDisplayName": "Joe I. Instructor",
                "userEmail": "joe@none.none",
                "userComment": "Needs improvement."
            },
            {
                "memberRole": "TA",
                "userDisplayName": "Mike A. Smith",
                "userEmail": "msmith@none.none",
                "userComment": " "
            },
            {
                "memberRole": "Student",
                "userDisplayName": "Jane Doe",
                "userEmail": "j.doe@none.none",
                "userComment": " "
            },
            ...
    }
};

dataOffset

var opts = {
    bodyRenderer: {...},
    pagerBar: {...},
    dataModel: {...},
    dataOffset: "membership_collection"
};

model

The model option contains the initial settings for the Pager model itself. This is different than the dataModel: model includes information such as the number of items which may be shown on the page, the sort order, the index of the current page, etc. The Pager includes defaults for these, but for our use case, we'll override one of the defaults: We'd like the initial number of items per page to be larger than the default of 10:

var opts = {
    bodyRenderer: {...},
    pagerBar: {...},
    dataModel: {...},
    dataOffset: "membership_collection",
    model: {
        pageSize: 20
    }
};

columnDefs

The columnDefs option defines the rules for extracting and presenting data from the data model into your columns. It is an array containing one entry for each column which is to be rendered in the table.

...

These options are the minimum you will need to set to use the rendered Pager.

...

Step 3: Add the script and styles to your HTML

You'll need to add your initialization script, along with the Fluid library and Pager style sheets, to you HTML file, as shown below::

...

NOTE that the InfusionAll.js file is minified - all of the whitespace has been removed, so it isn't really human-readable. If you're using the source distribution and you want to be able to debug the code, you'll want to include each of the required files individually. This would look like this:

But all of these individual JavaScript files are not necessary to make it work - the InfusionAll.js file has everything you need.

...

Other Customizations

Sortable Columns

The Pager provides the ability to sort the table's rows with respect to a column. This is accomplished very easily, by simply

...

...
<table summary="Table of all students and teachers." xmlns:rsf="http://ponder.org.uk">
    <thead>
        <tr rsf:id="header:">
            <th class="demo-pager-head-members"><a rsf:id="user-link" href="#">Members</a></th>
            <th class="demo-pager-head-email"><a rsf:id="user-email" href="#">Email</a></th>
            <th class="demo-pager-head-role"><a rsf:id="user-role" href="#">Role</a></th>
            <th><span class="demo-pager-head-comments">Comments</span></th>
        </tr>
    </thead>
    <tbody>
    ...

Range Annotation

Another feature the Pager offers is the ability to provide information about what range of data is associated with a given page. This is an annotation attached to each page link, displayed as a tooltip when a page link is hovered over and spoken aloud by screen readers when a page link receives keyboard focus.

...