Yahoo! Developer Network Home - Help

Site Search (YDN & YUIBlog):

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

# DataTable Control (beta): Server-side Sorting

This example integrates with server-side logic for customized sorting.

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:

/* No custom CSS. */

Markup:

<div id="serversorting"></div>

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.ServerSorting = new function() { // Column definitions var myColumnDefs = [ {key:"id", label:"ID", sortable:true}, {key:"name", label:"Name", sortable:true}, {key:"date", label:"Date", sortable:true}, {key:"price", label:"Price", sortable:true}, {key:"number", label:"Number", sortable:true} ]; // 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"] }; // DataTable instance var oConfigs = { initialRequest: "sort=id&dir=asc&results=100", // Server parameters for initial request sortedBy: {key:"id", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Set up initial column headers UI renderLoopSize: 25 // Bump up to account for large number of rows to display }; this.myDataTable = new YAHOO.widget.DataTable("serversorting", myColumnDefs, this.myDataSource, oConfigs); // Override function for custom server-side sorting this.myDataTable.sortColumn = function(oColumn) { // Default ascending var sDir = "asc" // If already sorted, sort in opposite direction if(oColumn.key === this.get("sortedBy").key) { sDir = (this.get("sortedBy").dir === YAHOO.widget.DataTable.CLASS_ASC) ? "desc" : "asc"; } // Pass in sort values to server request var newRequest = "sort=" + oColumn.key + "&dir=" + sDir + "&results=100&startIndex=0"; // Create callback for data request var oCallback = { success: this.onDataReturnInitializeTable, failure: this.onDataReturnInitializeTable, scope: this, argument: { // Pass in sort values so UI can be updated in callback function sorting: { key: oColumn.key, dir: (sDir === "asc") ? YAHOO.widget.DataTable.CLASS_ASC : YAHOO.widget.DataTable.CLASS_DESC } } } // Send the request this.getDataSource().sendRequest(newRequest, oCallback); }; }; });

### DataTable Control (beta) Examples:

- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Conditional row coloring
- 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