Pagination

• Introduction
• Basic Example
• Real World Example

Provides a set of controls to navigate through paged data.

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Pagination module.

YUI().use(
  'aui-pagination',
  function(Y) {
    // code goes here
  }
);

---

Using Pagination

Multiple Paginations can be rendered using the same HTML markup. We'll create one.

<div class="myPagination"></div>

Now let's initialize a new instance of Pagination, using the containers and total options.

YUI().use(
  'aui-pagination',
  function(Y) {
    new Y.Pagination(
      {
        containers: '.myPagination',
        total: 10
      }
    ).render();
  }
);

In order for the Pagination to function, you must specify what you want the pagination to do on the changeRequest event. This 'changeRequest' event fires when a user clicks on a page link. Here we will select the page link using the Pagination's changeRequest event.

YUI().use(
  'aui-pagination',
  function(Y) {
    new Y.Pagination(
      {
        containers: '.myPagination',
        on: {
          changeRequest: function(event) {
            this.setState(event.state);
          }
        },
        total: 10
      }
    ).render();
  }
);

---

Configuring Pagination

There are many configuration options that can be passed into the Pagination, such as maxPageLinks, which sets the total amount of links displayed at a time, rowsPerPageOptions, which can be used to change the amount of pages displayed at once, and circular, which allows continuous page navigation.

YUI().use(
  'aui-pagination',
  function(Y) {
    new Y.Pagination(
      {
        circular: true,
        containers: '.myPagination',
        maxPageLinks: 5,
        on: {
          changeRequest: function(event) {
            this.setState(event.state);
          }
        },
        rowsPerPageOptions: [1, 3, 5, 7],
        total: 10
      }
    ).render();
  }
);

You can also change what is displayed in the various links of the Pagination.

YUI().use(
  'aui-pagination',
  function(Y) {
    new Y.Pagination(
      {
        containers: '.myPagination',
        firstPageLinkLabel: 'First Page',
        nextPageLinkLabel: '>>',
        on: {
          changeRequest: function(event) {
            this.setState(event.state);
          }
        },
        total: 10
      }
    ).render();
  }
);

So far we have shown how to initialize and configure the Pagination, but it still isn't interacting with any page content! Pagination can be utilized to paginate through content from markup or dynamic content.

These actions can take place within changeRequest, utilizing event.state.page, event.state.rowsPerPage, etc. Check out the examples for how these changes can be executed.

Here is a very basic example of how a pagination may be used to change the content of a page.

YUI().use(
  'aui-pagination',
  function(Y) {
    //grabbing a node to be used for content
    var content = Y.one('.content');

    new Y.Pagination(
      {
        containers: '.myPagination',
        on: {
          changeRequest: function(event) {
            var newState = event.state;

            this.setState(newState);

            //setting the content of the node to the current page number
            content.html(event.state.page);
          }
        },
        total: 4
      }
    ).render();
  }
);