YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: DataTable Control: Textual Data Over XHR

# DataTable Control: Textual Data Over XHR

This example demonstrates how to populate a DataTable with delimited text data over XHR. In the second instance, the data includes header data as the first row, which is parsed out with a custom implementation of the DataSource method doBeforeCallback().

View example in new window.

## Sample Code for this Example

Data (standard):

Domino's Pizza|615 Caliente Dr|Sunnyvale|(408) 732-3030|4|http://local.yahoo.com/details?id=21335892&stx=pizza&csz=Sunnyvale+CA&ed=17rS8q160Sy5Htog0TF1m1atNv01Iz7ySeGEMtCL4dJsf1ku0nhziD2qN5XcnHlJtDS4IydIbA-- ...

Data (with headers):

Restaurant|Location|Town|Telephone|Stars|Website Domino's Pizza|615 Caliente Dr|Sunnyvale|(408) 732-3030|4|http://local.yahoo.com/details?id=21335892&stx=pizza&csz=Sunnyvale+CA&ed=17rS8q160Sy5Htog0TF1m1atNv01Iz7ySeGEMtCL4dJsf1ku0nhziD2qN5XcnHlJtDS4IydIbA-- ...

CSS:

/* No custom CSS. */

Markup:

<div id="text"></div> <div id="textWithHeaderData"></div>

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.XHR_Text = function() { var formatUrl = function(elCell, oRecord, oColumn, sData) { elCell.innerHTML = "<a href='" + oRecord.getData("Url") + "' target='_blank'>" + sData + "</a>"; }; var myColumnDefs = [ {key:"Name", sortable:true, formatter:formatUrl}, {key:"Phone"}, {key:"City"}, {key:"Rating", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} ]; var myDataSource = new YAHOO.util.DataSource("assets/php/text_proxy.txt"); //myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT; myDataSource.responseSchema = { recordDelim: "\n", fieldDelim: "|", fields: ["Name","Address","City","Phone",{key:"Rating",parser:"number"},"Url"] }; var myDataTable = new YAHOO.widget.DataTable("text", myColumnDefs, myDataSource, {caption:"Example: Textual Data Over XHR"}); var moreColumnDefs = [ {key:"Restaurant", sortable:true, formatter:formatUrl}, {key:"Location"}, {key:"Town"}, {key:"Stars", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} ]; var anotherDataSource = new YAHOO.util.DataSource("assets/php/text_with_headers_proxy.txt"); anotherDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT; anotherDataSource.responseSchema = { recordDelim: "\n", fieldDelim: "|", fields: ["Restaurant","Location","Town","Telephone",{key:"Stars",parser:"number"},"Url"] }; // Upgrade note: As of 2.5.0, the second argument is the full type-converted // response from the live data, and not the unconverted raw response anotherDataSource.doBeforeCallback = function(oRequest, oFullResponse, oParsedResponse) { // Remove the first result (i.e., the headers); oParsedResponse.results.shift(); return oParsedResponse; }; anotherDataTable = new YAHOO.widget.DataTable("textWithHeaderData", moreColumnDefs, anotherDataSource, {caption:"Example: First Record Holds Header Data"}); return { oDS: myDataSource, oDT: myDataTable, oDS2: anotherDataSource, oDT2: anotherDataTable }; }(); });

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### DataTable Control 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 and Sorting for Dynamic Data
- 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 (included with examples for Paginator)
- Complex Application (included with examples for Layout Manager)

### More DataTable Control 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