YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Paginator: Rendering controls into multiple containers

# Paginator: Rendering controls into multiple containers

In this example, we will add pagination to an ordered list. Some things to note:

- Pagination controls are added in a `<span>` as well as in a `<p>`.
- All included pagination controls use inline elements, so the containers needn't be block elements.
- A custom skin treatment has been applied.
- State changes made to the Paginator propagate to all controls in all containers.

View example in new window.

## 1987 US Billboard Top 40!

Random content with pagination controls embedded inline. Suspendisse vestibulum dignissim quam. Integer vel augue. Phasellus nulla purus, interdum ac, and here they are. and now back to random content habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

## Example Data

In this example, we'll be working with a data array stored in `YAHOO.example.data.top40`.

YAHOO.namespace('example.data').top40 = [ "Walk Like An Egyptian - Bangles", "Alone - Heart", ... ];

## Start with the content

All of Paginator's UI Components render inline elements, so you can include them almost anywhere. We'll create two container elements in our content, a `<span>`, nested in a paragraph above the list, and a separate `<p>` below it.

<div id="demo"> <h2>1987 US Billboard Top 40!</h2> <p> Random content with pagination controls embedded inline. Suspendisse vestibulum dignissim quam. Integer vel augue. Phasellus nulla purus, interdum ac, and here they are. <span id="span_container"></span> and now back to random content habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> <ol id="content" start="1"> <!-- the paginated content will go here --> </ol> <p id="p_container"></p> </div>

## Add code to update the content region

We'll generate the content by pulling a `slice` of our data array and wrapping each item in `<li>` and `<p>` tags.

YAHOO.util.Event.onDOMReady(function () { // Place code in the YAHOO.example namespace var Ex = YAHOO.namespace('example'); Ex.content = YAHOO.util.Dom.get('content'); Ex.handlePagination = function (index,count) { // Gather the content for the requested page var recs = Ex.data.top40.slice(index, index + count); // Update the content UI Ex.content.start = index + 1; Ex.content.innerHTML = '<li><p>'+recs.join('</p></li><li><p>')+'</p></li>'; }; ...

## Add pagination

Create a Paginator, identifying the two containers `span_container` and `p_container`. For fun, we use a custom `template` and configure the included UI Components for extra customization.

Ex.paginator = new YAHOO.widget.Paginator({ rowsPerPage : 10, totalRecords : Ex.data.top40.length, containers : ['span_container','p_container'], template : "{PreviousPageLink} {CurrentPageReport} {NextPageLink}", previousPageLinkLabel : "&lt;", nextPageLinkLabel : "&gt;", pageReportTemplate : "{startRecord} - {endRecord} of the Top {totalRecords}" });

Attach the content handler to the Paginator's `changeRequest` event and make the appropriate changes in the handler to use the Paginator's passed state data. `render()` the Paginator and, in this case, call the content generation code directly to initialize the list.

Ex.handlePagination = function (state) { // Gather the content for the requested page var startIndex = state.recordOffset, recs = Ex.data.top40.slice(startIndex, startIndex + state.rowsPerPage); // Update the content UI Ex.content.start = startIndex + 1; Ex.content.innerHTML = '<li><p>'+recs.join('</p></li><li><p>')+'</p></li>'; // Confirm state change with the Paginator Ex.paginator.setState(state); }; ... Ex.paginator.subscribe('changeRequest', Ex.handlePagination); Ex.paginator.render(); // To populate the list initially, call the handler directly passing // the Paginator's current state Ex.handlePagination(Ex.paginator.getState());

## Add style

For this example, we've given the UI Components some special visual treatment. Outside of this, there is one CSS override that was necessary for the `<span>` container.

Though the elements themselves are inline elements, the container is styled as `display: block` by Sam skin. To keep the `<span>` from breaking the normal rendering of the enclosing `<p>`, we add the following CSS:

/* override some skin styles */ .yui-skin-sam span.yui-pg-container { display: inline; }

## Full code listing

### JavaScript

YAHOO.util.Event.onDOMReady(function () { // Place code in the YAHOO.example namespace var Ex = YAHOO.namespace('example'); Ex.content = YAHOO.util.Dom.get('content'); Ex.handlePagination = function (state) { // Gather the content for the requested page var startIndex = state.recordOffset, recs = Ex.data.top40.slice(startIndex, startIndex + state.rowsPerPage); // Update the content UI Ex.content.start = startIndex + 1; Ex.content.innerHTML = '<li><p>'+recs.join('</p></li><li><p>')+'</p></li>'; // Confirm state change with the Paginator Ex.paginator.setState(state); }; Ex.paginator = new YAHOO.widget.Paginator({ rowsPerPage : 10, totalRecords : Ex.data.top40.length, containers : ['span_container','p_container'], template : "{PreviousPageLink} {CurrentPageReport} {NextPageLink}", previousPageLinkLabel : "<", nextPageLinkLabel : ">", pageReportTemplate : "{startRecord} - {endRecord} of the Top {totalRecords}" }); Ex.paginator.subscribe('changeRequest', Ex.handlePagination); Ex.paginator.render(); Ex.handlePagination(Ex.paginator.getState());

### CSS

/* override some skin styles */ .yui-skin-sam span.yui-pg-container { display: inline; } .yui-skin-sam .yui-pg-current { margin: 0; } .yui-skin-sam #demo .yui-pg-container a:link, .yui-skin-sam #demo .yui-pg-container a:active, .yui-skin-sam #demo .yui-pg-container a:visited, .yui-skin-sam #demo .yui-pg-container a:hover, .yui-skin-sam #demo .yui-pg-container span.yui-pg-previous, .yui-skin-sam #demo .yui-pg-container span.yui-pg-next { background: #fde; color: #f3c; text-decoration: none; border: 3px solid #f9c; padding: 0 3px; font-size: 130%; font-weight: bold; } .yui-skin-sam #demo .yui-pg-container span.yui-pg-previous, .yui-skin-sam #demo .yui-pg-container span.yui-pg-next { background: #eee; color: #a6a6a6; border: 3px double #ccc; } .yui-skin-sam #demo .yui-pg-container a:hover { background: #f9c; color: #fff; } /* demo specific styles */ #demo h2 { border: none; border-bottom: 1ex solid #aaa; color: #333; font-size: 1.5em; line-height: 65%; margin-top: 0; } #content { margin: 0 0 0 4em; padding-top: 1em; } #content li { color: #f6c; font: bold italic 200%/.5 Arial, sans-serif; padding: 1px 0; margin: 0; } #content li p { color: #555; font: normal 50% Arial, sans-serif; margin: 0; line-height: 2; } #p_container { text-align: center; }

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Paginator Examples:

- Getting started with Paginator
- Rendering controls into multiple containers
- Manually rendering Paginator UI Components
- Configuring the Paginator
- Client-side Pagination (included with examples for DataTable Control)
- Server-side Pagination and Sorting for Dynamic Data (included with examples for DataTable Control)
- Complex Example of Multiple Features (included with examples for DataTable Control)

### More Paginator Resources:

- User's Guide (external)
- API Documentation

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings