Yahoo! Developer Network Home - Help

YDN Site Search

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

# DataTable Control (beta): Client-side Pagination

This example retrieves a large data set in JSON format from a server script, then loads the data into a DataTable with client side pagination enabled.

View example in new window.

## Sample Code for this Example

Data:

{"recordsReturned":504, "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"}, ... ] }

CSS:

#paginated { text-align: center; } #paginated table { margin-left:auto; margin-right:auto; } #paginated .yui-pg-container a { color: #00d; } #paginated .yui-pg-pages a { text-decoration: underline; } #paginated, #paginated .yui-dt-loading { text-align: center; background-color: transparent; }

Markup:

<div id="paginated"></div>

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.ClientPagination = new function() { var myColumnDefs = [ {key:"id", label:"ID"}, {key:"name", label:"Name"}, {key:"date", label:"Date"}, {key:"price", label:"Price"}, {key:"number", label:"Number"} ]; this.myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?"); this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; // When responseSchema.totalRecords is not indicated, the records // returned from the DataSource are assumed to represent the entire set this.myDataSource.responseSchema = { resultsList: "records", fields: ["id","name","date","price","number"] }; // The Paginator instance will have its totalRecords configuration // populated by the DataTable when it receives the records from the // DataSource var oConfigs = { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 15 }), // Show over 500 records initialRequest: "results=504" }; this.myDataTable = new YAHOO.widget.DataTable("paginated", myColumnDefs, this.myDataSource, oConfigs); }; });

### 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
- 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 and Hiding 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