Fork me on GitHub

Paginator

Provides a set of controls to navigate through paged data.


Getting Started

First load the seed file, if you haven't yet.

<script src="https://cdn.alloyui.com/1.5.1/aui/aui-min.js"></script>

Then initialize AlloyUI and load the Paginator module.

AUI().use(
  'aui-paginator',
  function(A) {
    // code goes here
  }
);

Using Paginator

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

<div class="myPaginator"></div>

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

AUI().use(
  'aui-paginator',
  function(A) {
    new A.Paginator(
      {
        containers: '.myPaginator',
        total: 10
      }
    ).render();
  }
);

In order for the Paginator to function, you must specify what you want the paginator 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 Paginator's changeRequest event.

AUI().use(
  'aui-paginator',
  function(A) {
    new A.Paginator(
      {
        containers: '.myPaginator',
        on: {
          changeRequest: function(event) {
            this.setState(event.state);
          }
        },
        total: 10
      }
    ).render();
  }
);

Configuring Paginator

There are many configuration options that can be passed into the Paginator, 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.

AUI().use(
  'aui-paginator',
  function(A) {
    new A.Paginator(
      {
        circular: true,
        containers: '.myPaginator',
        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 Paginator.

AUI().use(
  'aui-paginator',
  function(A) {
    new A.Paginator(
      {
        containers: '.myPaginator',
        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 Paginator, but it still isn't interacting with any page content! Paginator 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 paginator may be used to change the content of a page.

AUI().use(
  'aui-paginator',
  function(A) {
    //grabbing a node to be used for content
    var content = A.one('.content');

    new A.Paginator(
      {
        containers: '.myPaginator',
        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();
  }
);
For more information about configuration, check out our API Docs.