Yahoo! Developer Network Home - Help

YDN Site Search

# 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.

View example in new window.

## Markup for this Example

<div id="demo"> <div id="paging"></div> <div id="dt"></div> </div>

## Data

The DataSource will deliver JSON data in the following format:

{ "recordsReturned":25, "totalRecords":1397, "startIndex":0, "sort":null, "dir":"asc", "records":[ {"id":"0", "name":"xmlqoyzgmykrphvyiz", "date":"13-Sep-2002", "price":"8370", "number":"8056", "address":"qdfbc", "company":"taufrid", "desc":"pppzhfhcdqcvbirw", "age":"5512", "title":"zticbcd", "phone":"hvdkltabshgakjqmfrvxo", "email":"eodnqepua", "zip":"eodnqepua", "country":"pdibxicpqipbsgnxyjumsza"}, ... ] }

## 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.

// Set up the DataSource var mySource = new YAHOO.util.DataSource('assets/php/json_proxy.php?'); mySource.responseType = YAHOO.util.DataSource.TYPE_JSON; mySource.responseSchema = { resultsList : 'records', fields : [ 'id','name','date','price','number','address','company', 'desc','age','title','phone','email','zip','country'], metaFields : { totalRecords: 'totalRecords', // The totalRecords meta field is // a "magic" meta, and will be passed // to the Paginator. } }; // A custom function to translate the js paging request into a query // string sent to the XHR DataSource var buildQueryString = function (state,dt) { return "startIndex=" + state.pagination.recordOffset + "&results=" + state.pagination.rowsPerPage; };

### 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.

// Set up the Paginator instance. var myPaginator = new YAHOO.widget.Paginator({ containers : ['paging'], pageLinks : 5, rowsPerPage : 15, rowsPerPageOptions : [15,30,60], template : "<strong>{CurrentPageReport}</strong> {PreviousPageLink} {PageLinks} {NextPageLink} {RowsPerPageDropdown}" });

### 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.

var myTableConfig = { initialRequest : 'startIndex=0&results=25', generateRequest : buildQueryString, paginator : myPaginator, paginationEventHandler : DataTable.handleDataSourcePagination };

### Voila, Server side paginated DataTable!

Finally, instantiate the DataTable with the DataSource and configuration.

// The columns to show in this table. var myColumnDefs = [ {key:"id"}, {key:"date"}, {key:"price"}, {key:"age"}, {key:"desc"} ]; var myTable = new YAHOO.widget.DataTable('dt', myColumnDefs, mySource, myTableConfig);

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### DataTable Control (beta) Examples:

- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Nested Headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- Textual Data Over XHR
- Local XML Data
- Adding and Deleting Rows
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination
- Server-side Sorting
- Server-side Pagination and Sorting, with Browser History Manager
- XY-scrolling, Y-scrolling, and X-scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Showing, Hiding, and Reordering Columns.
- Highlighting Cells, Rows, or Columns
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model
- Configuring the Paginator
- Complex Application (included with examples for Layout Manager (beta))

### More DataTable Control (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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