Gallery

The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.

Todd Smith

YUI Contributor

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.

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.

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.

If you are using a DataSource plugin with either client or remote pagination, don't call the DT's "render" until after you have plugged in the DataSource, NOT before. (this relates to how the module identifies the source of the data...)