Versions Compared

Old Version 50

changes.mady.by.user Colin Clark

Saved on

compared with

New Version Current

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Warning

Full Renderer support has been added to the Pager, providing a data-driven mode – this is the recommended way of using the Pager. For a tutorial describing how to use the data-driven Pager, see Pager Tutorial. This tutorial describes a more complex scenario where you supply your own markup to the Pager. Look for a new tutorial soon.

Section
Column
width60%

This page will walk you through an example of adding the Fluid Pager component to an HTML file.

This tutorial assumes that:

  • you are already familiar with HTML, Javascript and CSS
  • you are familiar with what the Pager is and does
  • now you just want to know how to add it to your file.

For more general information about the Pager, see Pager. For technical API documentation, see Pager API.

Tutorial: How to Use the Pager

Scenario

You've created a database to keep track of your vast collection of CDs, and you're working on a web interface for it. You'd like to break up long listings of search results into shorter, more managable chunks. This tutorial will show you how to use the Fluid Pager for this.

There are four basic steps to adding the Pager to your application:

  • Setup: Download and install the Fluid Infusion library
  • Step 1: Prepare your markup
  • Step 2: Write the script
  • Step 3: Add the script to your HTML
  • Step 4: Apply styles

The rest of this tutorial will explain each of these steps in detail.

Column
Panel
borderColor#321137
bgColor#fff
titleBGColor#aab597
titleStatus
borderStylesolid

This component is in Preview status

Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn This Page
borderStylesolid
Table of Contents
maxLevel5
minLevel2maxLevel5
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
titleSee Also
borderStylesolid
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
titleStill need help?
borderStylesolid

Join the infusion-users mailing list and ask your questions there.

...

Include Page
Infusion13:Tutorial SetupInfusion13:
Tutorial Setup

...

Step 1: Prepare your markup

This tutorial shows how to use the Pager in an entirely mark-up driven approach. This means that you will provide all the markup yourself instead of having the Pager generate it.

...

Section
Column

Column
width10%

Column

Note that the image on the left is just an example. You could just as easily want a simple markup and styles that look like this:

Center
Image Modified

The point is that your markup has the required elements.

...

That's all - these are the only changes you need to make to your HTML.

...

Step 2: Write the script

You'll need to create a file, say search-results.js, to contain your initialization script - the script you write to apply the Pager to your search results mark-up.

...

BUT: doing this alone is not sufficient. As mentioned above, the Pager is mark-up driven. As far as your script is concerned, this means that the Pager itself doesn't know what to do when a page link is clicked. All the Pager can do is call a function that you provide. You have to write that function.

The onModelChange Callback

Since the Pager doesn't actually know anything about your data, you have to take care of displaying the different pages of data yourself. The onModelChange function is used for this purpose.

...

In the scenario of this tutorial, you're creating a web front-end for your CD library, and using the Pager to chunk up search results. In this case, you would have to write a function that accepts the page number and in response, updates the page display with the relevant list of CDs from your search results.

...

Step 3: Add the script to your HTML

You'll need to add your initialization script, along with the Fluid library, to you HTML file. In the header of the file, link to the Javascript files with <script> tags:

Code Block
html
html
<script type="text/javascript" src="infusion-1.02/InfusionAll.js"></script>
<script type="text/javascript" src="search-results.js"></script>

...

Code Block
html
html
<script type="text/javascript" src="infusion-1.02/lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="infusion-1.02/lib/jquery/ui/js/ui.core.js"></script>
<script type="text/javascript" src="infusion-1.02/framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="infusion-1.02/framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="infusion-1.02/framework/core/js/DataBinding.js"></script>
<script type="text/javascript" src="infusion-1.02/components/pager/js/Pager.js"></script>
<script type="text/javascript" src="search-results.js"></script>

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

...

Step 4: Apply styles

Section
Column

Unless you've added styles to your mark-up, you will see in a browser that it doesn't actually look like the example shown up in Step 1, but rather like the image on the right.

In addition to the general lack of prettiness, there's no styling to indicate what the current page is, for one. Also, when you're on the first or last link, the 'previous' or 'next' link (usually) should be disabled. (See the Pagination Design Pattern for more info on this.)

Column

...

If we add a stylesheet with these styles, then when looking at the first page of search results, the page links will look like this:

Center
Image Modified