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.

DataTable Paginator (gallery-datatable-paginator) on cdn

Last Updated: 05/7/13

+ 1 -

Todd Smith

YUI Contributor

See 13 more by this user.

Created: 08/11/12
Last CDN Push: 01/16/13
Build Tag: gallery-2013.01.16-21-05
Project: YUI 3
License: YUI BSD
YUI Version: 3.10.0
Free for use.

This component is a Y.DataTable class extension that provides the capability to link the displayed `data` within a DataTable to a Paginator View class. This extension was specifically designed to work with Gallery-Paginator-View but could be configured to work with a user's own custom paginator View class.

The extension defines one new DataTable attribute paginator, which represents the only UI element (wherein this extension has no UI). It also defines listeners on the model for the view that updates the DT when `pageChange` events are fired.

Features

This extension provides the following features / capabilities;

Works with Gallery-Paginator-View or with any user created Model-View implementation.
Standard or Scrolling datatable
Sorting
Data provided either locally (client-side) or remotely (server-side)

Client-Side

Pagination of local data supplied to the DataTable is accomplished by initially storing the supplied "data" into an internal buffer. On a page change request, the internal buffer is Array-sliced to retrieve the portion of the data.

A new attribute has been added, paginationSource that when set to "client" will enable client-side pagination.

Prior issues with sorting have been fixed for client-side pagination.

Server-Side (remote data)

Server-side pagination provides support for either DataSource-based remote data (via the DataSource plugins) or for ModelSync.REST syncing infrastructure (preferred). The remote pagination works very well with sorting, but require your server to accept the "sortBy" attribute as input.

The linked Example demonstrates pagination for "local", "datasource" and "RESTful" servers.

Remote pagination is the BEST application of this component and is the typical use-case, i.e. where it is desired to efficiently look for small segments of data (pages) from a much larger dataset (server data).

To implement server-side pagination the server querystring / url has replaceable parameters (replaced via Y.Lang.sub) that are sent to the server and expected meta data must be returned back in the response (i.e. the number of items in total dataset being critical).

This DT-Paginator also allows for custom querystring (outgoing server request) and response (incoming data returned) mapping to user specified "meta" data that differs from the default PaginatorModel (Please see the Docs and Examples, specifically attribute serverPaginationMap)

Troubleshooting Remote Pagination
NOTE: It is ESSENTIAL that your response includes meta data for totalItems, otherwise the paginator won't render.

If your paged data is available (i.e. in a debugger Net tab) but the paginator doesn't render, this is usually due to the the "totalItems" property in the response not being defined, or often not returned as an integer. Please confirm your server returns this item AND that it is an integer and not a string value.

In addition, if you are attempting server-side pagination but forgot to set "paginationSource: 'remote'" it will default to client-side pagination.

Code Sample

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

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2013.01.16-21-05'
}).use('gallery-datatable-paginator','gallery-paginator-view', function(Y) {
 
//
// Basic Paginator Example
//
    var dtableB = new Y.DataTable({
        columns:    cols,
        data:       jsRandom500,
        scrollable: 'y',
        height:     '200px',
 
        paginator: new Y.PaginatorView({
            model:              new Y.PaginatorModel({ page:3, itemsPerPage:50 }),
            container:         '#pagContainerBar',
            paginatorTemplate:  Y.one('#tmpl-bar').getHTML(),
            pageOptions:        [ 10, 25, 50, 100, 'All' ]
        }),
 
       paginatorResize:    true,
       paginationSource:  'client'  // client-side pagination
 
    });
 
 
});