A View class extension to serve as a User Interface for the tracking of "pagination state" of a set of data. This PaginatorView was specifically designed to work with PaginatorModel serving as the "model" (in MVC parlance), although would work with any user-supplied model under conditions where similar attributes and attribute changes are mapped.

The PaginatorView was originally designed to function with DataTable (See Y.DataTable.Paginator) for managing the UI and page state of paginated tables, although it isn't necessarily limited to that application. This View responds to the model's attribute xxxxChange events and updates the UI accordingly.

The PaginatorView utilizes an HTML template concept, where certain replaceable tokens uniquely related to this view, in addition to all of the model's attributes, can be defined for positioning within the Paginator container.

Usage

// Setup a paginator view based on a data model for 500 items, paged at 50 per page ...
var pagView = new Y.PaginatorView(
   container:  '#myPagDIV',
   paginatorTemplate:  '#script-tmpl-mypag',
   model:  new Y.PaginatorModel({
       totalItems:     500,
       itemsPerPage:   50
       })
}).render();

View 'container'

The container attribute is the only REQUIRED attribute for this View, primarily because we need to know where to construct it positionally on the page.

This view has been designed such that the container setting can be either (a) an actual Y.Node instance OR (b) a DOM css selector ID ... assumed if the container setting is a {String} with the first character is '#'.

Paginator HTML Template

The "HTML template" for this PaginatorView is the guts of displaying the user interface. We refer to this as the "template" because it typically contains standard HTML but also includes "replacement tokens" identified by {your token here} curly braces.

A definition of HTML Template for the paginator can be achieved through several methods;

• Including the HTML template as content within the original container DOM element ... template retrived via .getHTML()
• Setting the paginatorTemplate attribute to either the template 'string', or giving a SCRIPT template DOM[id] or Y.Node
• Doing neither of the above ... where the default template is used (from TMPL_PAGINATOR static property)

(Note: If for some reason it is desired to not have a "template" (because you are rendering one outside of this view), setting paginatorTemplate:'' will override the default.)

A noteworthy component of the "HTML template" includes the token {pageLinks}, which signifies where links generated by this view for each page selector are to be placed. In some instances (e.g. a Paginator Bar, with an INPUT[text] for page #) you may not desire to have every link generated ... (think of a paginator with hundreds of pages, thus hundreds of links).

A sub-template is used to generate the "{pageLinks}" content, please see attribute pageLinkTemplate for information.

For a listing of all recognized "replaceable tokens" that can be included in the template is shown on the render method API page.

Data Attribute

A key takeaway for using this View is that page links (i.e. actionable selectable elements, such as A, BUTTON, DIV, etc...) for a specific page use an HTML "data" attribute which defines the page associated with the link.

The data attribute used within the view is data-pglink, and can have a value setting of "first", "last", "prev", "next" or any numeric page number.

For example, the following are all valid page link identifiers;

<a href="#" data-pglink="last" title="Last Page">Last</a>
<button data-pglink="6" class="myBtn">Page 6</button>
<select><option data-pglink="19" value="19">Page 19 : Rows 9501 - 10000</option></select>

Connecting to "other" UI Elements / Widgets

This View can be restricted to situations where the use desires to construct their own unique pageLinkTemplate and create their own events attribute to set listeners.

For example, the PaginatorView's render event can be listened for to ensure that the paginator has been initialized and setup.

Additionally the pageChange event (of the view) can be listened for to do any updating to user-specified page links and or a supporting YUI Widget.

Please see the examples for a guide on how to achieve this.