Tutorial - Pager

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.

The Pager is made up of several parts:

• a Pager Bar: The set of links to different pages (some people use two of these, one above the data, one below)

• the paged data itself

• a summary, such as "Items 20-30 of 76" (this is optional)

• a control to allow the user to change the number of items per page (this is also optional)

Let's say you want to display your roster results in a <table> element, and you want the page links at the top. We'll start simple, with just a top Pager Bar above the paged data (we'll add a summary and other enhancements later). Because you're dealing with thousands of student, you obviously don't want to have to manually create a <table> with thousands of rows – this is where the Pager's use of the Renderer comes in. In your HTML, you simply create a single table row that acts as a template to be used for each row. The same applies to the page links in the Pager Bar: you only define the minimum set of links necessary to illustrate how you want the links rendered.

So we might have something like this:

Some notes about this 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

1. the main container of the entire Pager markup

2. the container of the Pager Bar

3. the different kinds of links in the Pager Bar

4. the table you're using for the data

5. the row template, and the columns within it

The Pager defines some default class names for some of these things. Others, you will have to define yourself. So:

1. the main container of the entire Pager markup: There is no default for this, so let's attach an id of "demo-pager-container" to our main <div>.

2. the container of the Pager Bar: The default for this is a class name of "flc-pager-top" so we'll add that class to the <div> containing our list of links (note that all default selectors for Fluid components start with "flc-", which is short for "fluid component." These selectors are used for manipulating the DOM only, and should not be used for styling.)

3. the different kinds of links in the Pager Bar: The pager defines a number of default class names for these links, so we'll use those:

   • "flc-pager-previous" for the link to the 'previous' page of data

   • "flc-pager-next" for the link to the 'next' page of data

   • "flc-pager-links" for the container for the page-specific links

   • "flc-pager-pageLink" for an individual page-specific link

   • "flc-pager-pageLink-skip" for the markup to use where there are gaps in the page links, used with the "gapped" page strategy. This is useful when there will be many links, and can be used to produce lists like "1 2 3 ... 7 8 9 ... 12 13")

4. the table you're using for the data: There is no default for this, so let's attach an id of "membership-table" to the <table> element.

5. the row template, and the columns within it: The pager requires a special id with a namespace of rsf for these items, so we'll define the namespace for the table, and add ids to the row and each of the column cells. Note that the row id must have a colon (:) at the end of it, to indicate that it will be repeated.

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:

Initializing a Pager is pretty simple: one call to the creator function, passing

• the selector for your main container ("#demo-pager-container"), and

• options for configuring your Pager. It's setting up the options where the magic happens.

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.

The bodyRenderer value is an object containing

• the name of the subcomponent (type) and

• configuration options for it (options)

To specify the root of your template, you set the root selector:

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.

For our scenario, our dataModel will look like this:

dataOffset

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:

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.