Show:

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:

<pre><code> 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 += '&lt;a href="' + this.formatUrl(i) + '">' + i + '&lt;/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();
                            

}); </code></pre>

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

page

Number

Current page count. First page is 1.

Default: 1

totalItems

Number

Total number of items in all pages.

Default: 0

totalPages

Number readonly

Total number of pages to display