API Docs for: 3.18.1
Show:

Paginator Class

Module: paginator-core
Parent Module: paginator

The Paginator utility allows you to display an item or a group of items depending on the number of items you wish to display at one time.

Paginator's primary functionality is contained in paginator-core and is mixed into paginator to allow paginator to have extra functionality added to it while leaving the core functionality untouched. This allows paginator-core to remain available for use later on or used in isolation if it is the only piece you need.

Due to the vast number of interfaces a paginator could possibly consist of, Paginator does not contain any ready to use UIs. However, Paginator is ready to be used in any Based-based, module such as a Widget, by extending your desired class and mixing in Paginator. This is displayed in the following example:


YUI().use('paginator-url', 'widget', function (Y){
    var MyPaginator = Y.Base.create('my-paginator', Y.Widget, [Y.Paginator], {

       renderUI: function () {
           var numbers = '',
               i, numberOfPages = this.get('totalPages');

           for (i = 1; i <= numberOfPages; i++) {
               // use paginator-url's formatUrl method
               numbers += '<a href="' + this.formatUrl(i) + '">' + i + '</a>';
           }

           this.get('boundingBox').append(numbers);
       },

       bindUI: function () {
           this.get('boundingBox').delegate('click', function (e) {
               // let's not go to the page, just update internally
               e.preventDefault();
               this.set('page', parseInt(e.currentTarget.getContent(), 10));
           }, 'a', this);

           this.after('pageChange', function (e) {
               // mark the link selected when it's the page being displayed
               var bb = this.get('boundingBox'),
                   activeClass = 'selected';

               bb.all('a').removeClass(activeClass).item(e.newVal).addClass(activeClass);
           });
       }

    });

    var myPg = new MyPaginator({
                   totalItems: 100,
                   pageUrl: '?pg={page}'
               });

    myPg.render();
});

Methods

_getTotalPagesFn

() Number protected

Returns the total number of pages based on the total number of items provided and the number of items per page

Returns:

Number:

Total number of pages based on total number of items and items per page or one if itemsPerPage is less than one

hasNextPage

() Boolean

Returns True if there is a next page in the set.

If totalItems isn't set, assume there is always next page.

Returns:

Boolean:

true if there is a next page, false otherwise.

hasPrevPage

() Boolean

Returns True if there is a previous page in the set.

Returns:

Boolean:

true if there is a previous page, false otherwise.

nextPage

() chainable

Sets the page to the next page in the set, if there is a next page.

prevPage

() chainable

Sets the page to the previous page in the set, if there is a previous page.

Attributes

itemsPerPage

Number

Maximum number of items per page. A value of negative one (-1) indicates all items on one page.

Default: 10

Fires event itemsPerPageChange

Fires when the value for the configuration attribute itemsPerPage is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

page

Number

Current page count. First page is 1.

Default: 1

Fires event pageChange

Fires when the value for the configuration attribute page is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

totalItems

Number

Total number of items in all pages.

Default: 0

Fires event totalItemsChange

Fires when the value for the configuration attribute totalItems is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

totalPages

Number readonly

Total number of pages to display

Fires event totalPagesChange

Fires when the value for the configuration attribute totalPages is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.