Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Paginator View (gallery-paginator-view) on cdn

Last Updated: 01/29/13

+ 1 -

Todd Smith

YUI Contributor

See 13 more by this user.

Created: 08/11/12
Last CDN Push: 12/12/12
Build Tag: gallery-2012.12.12-21-11
Project: YUI 3
License: YUI BSD
YUI Version: 3.8.1
Free for use.

This module consists of two elements; PaginatorModel and PaginatorView to provide both the data handling and User Interface for Pagination.

The View is a Y.View extension which provides for a variety of UI elements and user-supplied capability to setup a variety of Paginators which have a specific "look and feel". (see sample image below)

An "HTML template" that includes replaceable text tokens is provided either in the initial container attribute or in the paginatorTemplate and associated page link attributes. The PaginatorView also provides a few events that can be listened to in order for the user to link it to their own Widget, View or other YUI elements.

Features

The PaginatorModel is simple and can easily be mixed-in to user-created custom Models
PaginatorView includes a standard "default" set of CSS styles to get you up and running quickly (the first example in the image above is the default)
An additional set of "paginator bar" CSS is provided to give the look of an integrated paginator within DataTable. (the third example in the image above is the pag bar)
HTML templates can be provided as either strings, or as a Node instance or as a SCRIPT template
Capability to provide an HTML "select" control for changing "rows per page" is provided
Abbreviated links are provided to help limit a very, very long list of page links
The View can be coupled with other YUI Widgets (buttons, button groups, slider, etc..)
A "circular" capability is provided for cases where page selection wraps past the first or last item.
Multiple PaginatorViews can be linked to the same PaginatorModel (for example, above and below a DataTable) and their changes sync amongst one another -- dual controls.

For more information, see the links below or the PaginatorView Docs and / or the examples.

UPDATE : The December 2012 update of this gallery added capability to have zero "totalItems" which in turn disables the View elements.

This extension was originally developed for use with Gallery DataTable-Paginator, but could probably be used for other situations looking to provide a UI for paged data.

Code Sample

<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>

<!--    Define HTML markup and script templates for the sample Paginators      -->
<div id="pagDefACont"></div>
 
<div id="pagBasicCCont"></div>
<script type="text/x-template" id="tmpl-basic-C">
  <fieldset>
     <legend> Active Page: </legend>
        <a href="#" data-pglink="first" class="{pageLinkClass}" title="First Page"><<</a>
        <a href="#" data-pglink="prev" class="{pageLinkClass}" title="Prior Page"><</a>
        {pageLinks}
        <a href="#" data-pglink="next" class="{pageLinkClass}" title="Next Page">></a>
        <a href="#" data-pglink="last" class="{pageLinkClass}" title="Last Page">>></a>
        <span style="float:right;margin-right:15px;">Select rows/page: {selectRowsPerPage}</span>
  </fieldset>
</script>
 
<!--  markup for "pagBar"  not shown, please see example .... -->
 
<!--  your yuilibrary call goes here ....  -->
 
<script type="text/javascript">
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.12.12-21-11'
}).use('gallery-paginator-view', function(Y) {
//
//  Define a single Model, that will be shared by EVERY following View
//
    var pmodel = new Y.PaginatorModel({
        page:           2,
        itemsPerPage:   25,
        totalItems:     500
    });
 
//---------------------------------------------------------------------------
//  Default Views ...
//---------------------------------------------------------------------------
    new Y.PaginatorView({
        model:      new Y.PaginatorModel({
            page:           2,
            itemsPerPage:   50,
            totalItems:     500
        }),
        container:  '#pagDefACont'
    }).render();
 
 // A link list, wrapped in a FIELDSET ...
    new Y.PaginatorView({
        model:              pmodel,
        container:          '#pagBasicCCont',
        paginatorTemplate:  '#tmpl-basic-C',
        maxPageLinks:       5,
        pageLinkTemplate:  '<a href="#" data-pglink="{page}" class="{pageLinkClass}"  title="Rows {pageStartIndex} to {pageEndIndex}">{page}</a>'
    }).render();
 
// Provides a "Paginator Bar" 
 
    var pagBar = new Y.PaginatorView({
        model:      new Y.PaginatorModel({
            page:           2,
            itemsPerPage:   25,
            totalItems:     500
        }),
        container:            '#pagBarACont',
        paginatorTemplate:  Y.one('#tmpl-bar-A').getHTML(),
        pageOptions:        [ 10, 25, 50, 100, 'All' ]
    }).render();
 
});
</script>

<div id="pagDefACont"></div>

<div id="pagBasicCCont"></div>
<script type="text/x-template" id="tmpl-basic-C">
  <fieldset>
     <legend> Active Page: </legend>
        <a href="#" data-pglink="first" class="{pageLinkClass}" title="First Page"><<</a>
        <a href="#" data-pglink="prev" class="{pageLinkClass}" title="Prior Page"><</a>
        {pageLinks}
        <a href="#" data-pglink="next" class="{pageLinkClass}" title="Next Page">></a>
        <a href="#" data-pglink="last" class="{pageLinkClass}" title="Last Page">>></a>
        <span style="float:right;margin-right:15px;">Select rows/page: {selectRowsPerPage}</span>
  </fieldset>
</script>

//---------------------------------------------------------------------------
//  Default Views ...
//---------------------------------------------------------------------------
    new Y.PaginatorView({
        model:      new Y.PaginatorModel({
            page:           2,
            itemsPerPage:   50,
            totalItems:     500
        }),
        container:  '#pagDefACont'
    }).render();

// A link list, wrapped in a FIELDSET ...
    new Y.PaginatorView({
        model:              pmodel,
        container:          '#pagBasicCCont',
        paginatorTemplate:  '#tmpl-basic-C',
        maxPageLinks:       5,
        pageLinkTemplate:  '<a href="#" data-pglink="{page}" class="{pageLinkClass}"  title="Rows {pageStartIndex} to {pageEndIndex}">{page}</a>'
    }).render();

// Provides a "Paginator Bar" 
 
    var pagBar = new Y.PaginatorView({
        model:      new Y.PaginatorModel({
            page:           2,
            itemsPerPage:   25,
            totalItems:     500
        }),
        container:            '#pagBarACont',
        paginatorTemplate:  Y.one('#tmpl-bar-A').getHTML(),
        pageOptions:        [ 10, 25, 50, 100, 'All' ]
    }).render();

});
</script>