Alloy UI

aui-paginator  1.0.1

 
Filters
Classes

Class Paginator - extends Base

A base class for Paginator, providing:
  • Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)
  • Set of controls to navigate through paged data
Quick Example:
var instance = new A.Paginator({
containers: '.paginatorA',
total: 10,
maxPageLinks: 10,
rowsPerPage: 1,
rowsPerPageOptions: [ 1, 3, 5, 7 ]
}).render();
Check the list of Configuration Attributes available for Paginator.

Constructor

Paginator ( config )
Parameters:
config <Object> Object literal specifying widget configuration properties.

Properties

lastState - protected Object | null

Store the last state object used on the changeRequest event.

Paginator.ATTRS - static Object

Static property used to define the default attribute configuration for the Paginator.

Paginator.NAME - static String

Static property provides a string to identify the class.

templatesCache - protected String

Cached template after YUI substitute were applied.

Properties inherited from Attribute:

Properties inherited from Base:

Configuration Attributes

alwaysVisible - boolean

If true the Paginator will be always visible, even when the number of pages is 0. To hide the paginator controls automatically when there is no pages to display use false.
Default Value: true

containers - Node | String

The Paginator controls UI could be displayed in more than one container (i.e., in the header and footer of a list). Pass a NodeList or a selector to grab the containers.
Default Value: null

firstPageLink - Node | String

The Node or template to be used as the first link element.
Default Value: Generated anchor element.

firstPageLinkLabel - String

The label used as content of the firstPageLink element.
Default Value: 'first'

lastPageLink - Node | String

The Node or template to be used as the last link element.
Default Value: Generated anchor element.

lastPageLinkLabel - String

The label used as content of the lastPageLink element.
Default Value: 'last'

maxPageLinks - Number

The max number of page links to be displayed. If lower than the total number of pages they are still navigable using next and prev links.
Default Value: 10

nextPageLink - Node | String

The Node or template to be used as the next link element.
Default Value: Generated anchor element.

nextPageLinkLabel - String

The label used as content of the nextPageLink element.
Default Value: 'next >'

page - Number

Page to display on initial paint.
Default Value: 1

pageContainerTemplate - String

HTML Template for the page links container.
Default Value: Generated span HTML element.

pageLinkContent - function

Function which set the content of the each page element. The passed function receive as arguments the reference for the page element node, the page number and the index of the page element.

Example:
function(pageEl, pageNumber, index) {
pageEl.html(pageNumber);
}
Default Value: Basic function to set the html of the page element with the page number.

pageLinkTemplate - String

HTML Template for the link elements.
Default Value: Generated anchor HTML element.

pageReportEl - String

Node element to display the page report (i.e., (1 of 100)).
Default Value: Generated span HTML element.

pageReportLabelTemplate - String

Template for the pageReportEl content. Note the placeholders for the page {page} and the total pages {totalPages}.
Default Value: '({page} of {totalPages})'

prevPageLink - Node | String

The Node or template to be used as the prev link element.
Default Value: Generated anchor element.

prevPageLinkLabel - String

The label used as content of the prevPageLink element.
Default Value: '< prev'

rowsPerPage - Number

Number of records constituting a "page".
Default Value: 1

rowsPerPageEl - Node | String

Node element to display the rowsPerPage.
Default Value: Generated select HTML element.

rowsPerPageOptions - Array

Array to be displayed on the generated HTML Select element with the rowsPerPage information. (i.e., [1,3,5,7], will display these values on the select)
Default Value: []

state - Object

Generates information to the changeRequest event. See changeRequest.
Default Value: {}

template - String

Template used to render controls. The string will be used as innerHTML on all specified container nodes. Bracketed keys (e.g. {pageLinks}) in the string will be replaced with an instance of the so named ui component.
Default Value: '{FirstPageLink} {PrevPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport} {Total} {RowsPerPageSelect}'

total - Number

Total number of records to paginate through.
Default Value: 0

totalEl - String

Node element to display the total information.
Default Value: Generated span HTML element.

totalLabel - String

The label markup to the total information.
Default Value: '(Total {total})'

totalPages - Number

Number of pages. Calculated based on the total divided by the rowsPerPage.
Default Value: 0

Configuration attributes inherited from Base:

Methods

_afterSetState

protected void _afterSetState ( event )
Fires after the value of the state attribute change.
Parameters:
event <EventFacade>

_beforeSetState

protected void _beforeSetState ( event )
Fires before the value of the state attribute change.
Parameters:
event <EventFacade>

_bindDOMEvents

protected void _bindDOMEvents ( )
Bind DOM events on the Paginator UI.

_delegateDOM

protected void _delegateDOM ( )
Delegate DOM events on the Paginator UI.

_getState

protected Object _getState ( v )
Private getter for state.
Parameters:
v <Object> Current state object.
Returns: Object
State object.

_getTemplate

protected String _getTemplate ( v )
Getter for template.
Parameters:
v <String> Current template.
Returns: String
Current template.

_onClickFirstLinkEl

protected void _onClickFirstLinkEl ( event )
Click event handler for the firstLinkEl.
Parameters:
event <EventFacade>

_onClickLastLinkEl

protected void _onClickLastLinkEl ( event )
Click event handler for the lastLinkEl.
Parameters:
event <EventFacade>

_onClickNextLinkEl

protected void _onClickNextLinkEl ( event )
Click event handler for the nextLinkEl.
Parameters:
event <EventFacade>

_onClickPageLinkEl

protected void _onClickPageLinkEl ( event )
Click event handler for the pageLinkEl.
Parameters:
event <EventFacade>

_onClickPrevLinkEl

protected void _onClickPrevLinkEl ( event )
Click event handler for the prevLinkEl.
Parameters:
event <EventFacade>

_renderRowsPerPageOptions

protected void _renderRowsPerPageOptions ( )
Render rows per page options.

_renderTemplateUI

protected void _renderTemplateUI ( )
Render the UI controls based on the template.

_setState

protected Object _setState ( v )
Private setter for state.
Parameters:
v <Object> New state object.

_setTotal

protected Number _setTotal ( v )
Setter for total.
Parameters:
v <Number>

_syncPageLinksUI

protected void _syncPageLinksUI ( )
Sync the Paginator links UI.

bindUI

protected void bindUI ( )
Bind the events on the Paginator UI. Lifecycle.

calculateRange

Object calculateRange ( name )
Create a range to display on the pageLinks, keep the current page on center.
Parameters:
name <Type> description
Returns: Object
Object containing the start and end information.

changeRequest

void changeRequest ( )
Fires changeRequest event. This is the most important event because it's responsible to update the UI, invoked .setState(newState) to update the UI.

destructor

protected void destructor ( )
Descructor lifecycle implementation for the Paginator class. Purges events attached to the node (and all child nodes).

eachContainer

void eachContainer ( fn )
Loop through all containers and execute the passed callback.
Parameters:
fn <function> Callback

hasNextPage

boolean hasNextPage ( )
Check if there is a next page.

hasPage

boolean hasPage ( page )
Check if the page exists.
Parameters:
page <Number>

hasPrevPage

boolean hasPrevPage ( )
Check if there is a previous page.

renderUI

protected void renderUI ( )
Create the DOM structure for the Paginator. Lifecycle.

setState

void setState ( v )
Public setter for state.
Parameters:
v <Object> New state object.

syncUI

protected void syncUI ( )
Sync the Paginator UI. Lifecycle.

Events

alwaysVisibleChange

alwaysVisibleChange ( event )
Fires when the value for the configuration attribute 'alwaysVisible' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

containersChange

containersChange ( event )
Fires when the value for the configuration attribute 'containers' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

firstPageLinkChange

firstPageLinkChange ( event )
Fires when the value for the configuration attribute 'firstPageLink' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

firstPageLinkLabelChange

firstPageLinkLabelChange ( event )
Fires when the value for the configuration attribute 'firstPageLinkLabel' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

lastPageLinkChange

lastPageLinkChange ( event )
Fires when the value for the configuration attribute 'lastPageLink' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

lastPageLinkLabelChange

lastPageLinkLabelChange ( event )
Fires when the value for the configuration attribute 'lastPageLinkLabel' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

maxPageLinksChange

maxPageLinksChange ( event )
Fires when the value for the configuration attribute 'maxPageLinks' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

nextPageLinkChange

nextPageLinkChange ( event )
Fires when the value for the configuration attribute 'nextPageLink' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

nextPageLinkLabelChange

nextPageLinkLabelChange ( event )
Fires when the value for the configuration attribute 'nextPageLinkLabel' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

pageChange

pageChange ( event )
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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

pageContainerTemplateChange

pageContainerTemplateChange ( event )
Fires when the value for the configuration attribute 'pageContainerTemplate' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

pageLinkContentChange

pageLinkContentChange ( event )
Fires when the value for the configuration attribute 'pageLinkContent' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

pageLinkTemplateChange

pageLinkTemplateChange ( event )
Fires when the value for the configuration attribute 'pageLinkTemplate' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

pageReportElChange

pageReportElChange ( event )
Fires when the value for the configuration attribute 'pageReportEl' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

pageReportLabelTemplateChange

pageReportLabelTemplateChange ( event )
Fires when the value for the configuration attribute 'pageReportLabelTemplate' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

prevPageLinkChange

prevPageLinkChange ( event )
Fires when the value for the configuration attribute 'prevPageLink' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

prevPageLinkLabelChange

prevPageLinkLabelChange ( event )
Fires when the value for the configuration attribute 'prevPageLinkLabel' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

rowsPerPageChange

rowsPerPageChange ( event )
Fires when the value for the configuration attribute 'rowsPerPage' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

rowsPerPageElChange

rowsPerPageElChange ( event )
Fires when the value for the configuration attribute 'rowsPerPageEl' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

rowsPerPageOptionsChange

rowsPerPageOptionsChange ( event )
Fires when the value for the configuration attribute 'rowsPerPageOptions' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

stateChange

stateChange ( event )
Fires when the value for the configuration attribute 'state' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

templateChange

templateChange ( event )
Fires when the value for the configuration attribute 'template' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

totalChange

totalChange ( event )
Fires when the value for the configuration attribute 'total' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

totalElChange

totalElChange ( event )
Fires when the value for the configuration attribute 'totalEl' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

totalLabelChange

totalLabelChange ( event )
Fires when the value for the configuration attribute 'totalLabel' 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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

totalPagesChange

totalPagesChange ( event )
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:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

Events inherited from Base: