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 integrates with server-side logic for customized pagination, recommended for very large sets of data.

View example in new window.

## Sample Code for this Example

Data:

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

CSS:

/* custom styles for this example */ #dt-pag-nav { margin:1em; } /* custom pagination UI */

Markup:

<div id="dt-pag-nav"> <span id="prevLink"><</span> Showing items <span id="startIndex">0</span> - <span id="endIndex">24</span> <span id="ofTotal"></span> <span id="nextLink">></span> </div> <div id="serverpagination"></div>

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.ServerPagination = new function() { // Column definitions var myColumnDefs = [ {key:"id", label:"ID"}, {key:"name", label:"Name"}, {key:"date", label:"Date"}, {key:"price", label:"Price"}, {key:"number", label:"Number"}, {key:"address", label:"Address"}, {key:"company", label:"Company"}, {key:"desc", label:"Description"}, {key:"age", label:"Age"}, {key:"title", label:"Title"}, {key:"phone", label:"Phone"}, {key:"email", label:"Email"}, {key:"zip", label:"Zip"}, {key:"country", label:"Country"} ]; // DataSource instance this.myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?"); this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; this.myDataSource.responseSchema = { resultsList: "records", fields: ["id","name","date","price","number","address","company","desc","age","title","phone","email","zip","country"] }; // DataTable instance var oConfigs = { initialRequest: "startIndex=0&results=25" // Initial values }; this.myDataTable = new YAHOO.widget.DataTable("serverpagination", myColumnDefs, this.myDataSource, oConfigs); // Custom code to parse the raw server data for Paginator values and page links this.myDataSource.doBeforeCallback = function(oRequest, oRawResponse, oParsedResponse) { var oSelf = YAHOO.example.ServerPagination; var oDataTable = oSelf.myDataTable; // Get Paginator values var oRawResponse = oRawResponse.parseJSON(); //JSON.parse(oRawResponse); // Parse the JSON data var recordsReturned = oRawResponse.recordsReturned; // How many records this page var startIndex = oRawResponse.startIndex; // Start record index this page var endIndex = startIndex + recordsReturned -1; // End record index this page var totalRecords = oRawResponse.totalRecords; // Total records all pages // Update the DataTable Paginator with new values var newPag = { recordsReturned: recordsReturned, startRecordIndex: startIndex, endIndex: endIndex, totalResults: totalRecords } oDataTable.updatePaginator(newPag); // Update the links UI YAHOO.util.Dom.get("prevLink").innerHTML = (startIndex === 0) ? "<" : "<a href=\"#previous\" alt=\"Show previous items\"><</a>" ; YAHOO.util.Dom.get("nextLink").innerHTML = (endIndex >= totalRecords) ? ">" : "<a href=\"#next\" alt=\"Show next items\">></a>"; YAHOO.util.Dom.get("startIndex").innerHTML = startIndex; YAHOO.util.Dom.get("endIndex").innerHTML = endIndex; YAHOO.util.Dom.get("ofTotal").innerHTML = " of " + totalRecords; // Let the DataSource parse the rest of the response return oParsedResponse; }; // Hook up custom pagination this.getPage = function(nStartRecordIndex, nResults) { // If a new value is not passed in // use the old value if(!YAHOO.lang.isValue(nResults)) { nResults = this.myDataTable.get("paginator").totalRecords; } // Invalid value if(!YAHOO.lang.isValue(nStartRecordIndex)) { return; } var newRequest = "startIndex=" + nStartRecordIndex + "&results=" + nResults; this.myDataSource.sendRequest(newRequest, this.myDataTable.onDataReturnInitializeTable, this.myDataTable); }; this.getPreviousPage = function(e) { YAHOO.util.Event.stopEvent(e); // Already at first page if(this.myDataTable.get("paginator").startRecordIndex === 0) { return; } var newStartRecordIndex = this.myDataTable.get("paginator").startRecordIndex - this.myDataTable.get("paginator").rowsThisPage; this.getPage(newStartRecordIndex); }; this.getNextPage = function(e) { YAHOO.util.Event.stopEvent(e); // Already at last page if(this.myDataTable.get("paginator").startRecordIndex + this.myDataTable.get("paginator").rowsThispage >= this.myDataTable.get("paginator").totalRecords) { return; } var newStartRecordIndex = (this.myDataTable.get("paginator").startRecordIndex + this.myDataTable.get("paginator").rowsThisPage); this.getPage(newStartRecordIndex); }; YAHOO.util.Event.addListener(YAHOO.util.Dom.get("prevLink"), "click", this.getPreviousPage, this, true); YAHOO.util.Event.addListener(YAHOO.util.Dom.get("nextLink"), "click", this.getNextPage, this, true); }; });

### 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
- Fixed Scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model

### More DataTable Control (beta) Resources:

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

Copyright © 2007 Yahoo! Inc. All rights reserved.

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