YUI Library Examples: DataTable Control (beta): Server-side Pagination

DataTable Control (beta): Server-side Pagination

This example illustrates how to configure a DataTable instance to page through a large data set managed on the server.

Markup for this Example

Data

The DataSource will deliver JSON data in the following format:

JavaScript

Set up the DataSource

  • responseSchema.resultsList is set to the location in the JSON response of the key holding the list of records for the current page.
  • responseSchema.metaFields is used to identify the location of the key in the parsed JSON response containing the totalRecords for the Paginator.
  • A custom function is created to translate JavaScript paging requests into something useful to the server.

Create a Paginator

For this example, we use a single container rather than allow DataTable to assign its default pagination containers. A custom layout for the pagination controls is used, set in the template attribute.

Note: the rowsPerPage configuration is required for all Paginator instances.

Hooking everything together in the DataTable config

Here's the interesting part.

  • initialRequest needs to target data that will populate at least the data on the page specified in the Paginator's initialPage configuration (1 by default).
  • generateRequest is set to our custom function.
  • paginator is assigned the Paginator instance.
  • paginationEventHandler is set to DataTable's default DataSource relay, handleDataSourcePagination. If more intricate DataSource interaction is needed, assign a custom function.

Voila, Server side paginated DataTable!

Finally, instantiate the DataTable with the DataSource and configuration.

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings