paginator Module

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();
            });