Yahoo! Developer Network Home - Help

YUI Library Examples: DataTable Control (beta): Textual Data Over XHR

DataTable Control (beta): 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.

Name
Phone
City
Rating
Example: Textual Data Over XHR
Phone
City
Loading data...
Restaurant
Location
Town
Stars
Example: First Record Holds Header Data
Location
Town
Loading data...

Sample Code for this Example

Data (standard):

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

Data (with headers):

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

CSS:

1/* No custom CSS. */ 
view plain | print | ?

Markup:

1<div id="text"></div> 
2<div id="textWithHeaderData"></div> 
view plain | print | ?

JavaScript:

1YAHOO.util.Event.addListener(window, "load", function() { 
2    YAHOO.example.XHR_Text = new function() { 
3        this.formatUrl = function(elCell, oRecord, oColumn, sData) { 
4            elCell.innerHTML = "<a href='" + oRecord.getData("Url") + "' target='_blank'>" + sData + "</a>"; 
5        }; 
6 
7        var myColumnDefs = [ 
8            {key:"Name", sortable:true, formatter:this.formatUrl}, 
9            {key:"Phone"}, 
10            {key:"City"}, 
11            {key:"Rating", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} 
12 
13        ]; 
14 
15        this.myDataSource = new YAHOO.util.DataSource("assets/php/text_proxy.txt?"); 
16        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT; 
17        this.myDataSource.responseSchema = { 
18            recordDelim: "\n", 
19            fieldDelim: "|", 
20            fields: ["Name","Address","City","Phone",{key:"Rating",parser:YAHOO.util.DataSource.parseNumber},"Url"] 
21        }; 
22 
23        this.myDataTable = new YAHOO.widget.DataTable("text", myColumnDefs, 
24                this.myDataSource, {caption:"Example: Textual Data Over XHR"}); 
25 
26 
27 
28        var moreColumnDefs = [ 
29            {key:"Restaurant", sortable:true, formatter:this.formatUrl}, 
30            {key:"Location"}, 
31            {key:"Town"}, 
32            {key:"Stars", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} 
33        ]; 
34 
35        this.anotherDataSource = new YAHOO.util.DataSource("assets/php/text_with_headers_proxy.txt?"); 
36        this.anotherDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT; 
37        this.anotherDataSource.responseSchema = { 
38            recordDelim: "\n", 
39            fieldDelim: "|", 
40            fields: ["Restaurant","Location","Town","Telephone",{key:"Stars",parser:YAHOO.util.DataSource.parseNumber},"Url"] 
41        }; 
42        // Upgrade note: As of 2.5.0, the second argument is the full type-converted 
43        // response from the live data, and not the unconverted raw response 
44        this.anotherDataSource.doBeforeCallback = function(oRequest, oFullResponse, oParsedResponse) { 
45            // Remove the first result (i.e., the headers); 
46            oParsedResponse.results.shift(); 
47            return oParsedResponse; 
48        }; 
49 
50        this.anotherDataTable = new YAHOO.widget.DataTable("textWithHeaderData", moreColumnDefs, 
51                this.anotherDataSource, {caption:"Example: First Record Holds Header Data"}); 
52    }; 
53}); 
view plain | print | ?

YUI Logger Output:

Logger Console

INFO5899ms (+1) 11:56:24 PM:
Connection
Transaction 1 sent.
INFO5898ms (+0) 11:56:24 PM:
Connection
Default HTTP header X-Requested-With set with value of XMLHttpRequest
INFO5898ms (+0) 11:56:24 PM:
Connection
XHR object created for transaction 1
INFO5898ms (+1) 11:56:24 PM:
DataSource  instance1
Making connection to live data for "null"
INFO5897ms (+3) 11:56:24 PM:
DataTable  instance yui-dt1
DataTable showing message: Loading data...
INFO5894ms (+0) 11:56:24 PM:
DataTable  instance yui-dt1
Accessibility TH cells for 4keys created
INFO5894ms (+2) 11:56:24 PM:
DataTable  instance yui-dt1
TH cells for 4 keys created
INFO5892ms (+0) 11:56:24 PM:
RecordSet  instance yui-rs1
RecordSet initialized
INFO5892ms (+0) 11:56:24 PM:
ColumnSet  instance yui-cs1
ColumnSet initialized
INFO5892ms (+0) 11:56:24 PM:
DataSource  instance1
DataSource initialized
INFO5892ms (+2) 11:56:24 PM:
Connection
Transaction 0 sent.
INFO5890ms (+0) 11:56:24 PM:
Connection
Default HTTP header X-Requested-With set with value of XMLHttpRequest
INFO5890ms (+1) 11:56:24 PM:
Connection
Initialize transaction header X-Request-Header to XMLHttpRequest.
INFO5889ms (+0) 11:56:24 PM:
Connection
XHR object created for transaction 0
INFO5889ms (+4) 11:56:24 PM:
DataSource  instance0
Making connection to live data for "null"
INFO5885ms (+2) 11:56:24 PM:
DataTable  instance yui-dt0
DataTable showing message: Loading data...
INFO5883ms (+0) 11:56:24 PM:
DataTable  instance yui-dt0
Accessibility TH cells for 4keys created
INFO5883ms (+4) 11:56:24 PM:
DataTable  instance yui-dt0
TH cells for 4 keys created
INFO5879ms (+2) 11:56:24 PM:
RecordSet  instance yui-rs0
RecordSet initialized
INFO5877ms (+1) 11:56:24 PM:
ColumnSet  instance yui-cs0
ColumnSet initialized
INFO5876ms (+14) 11:56:24 PM:
DataSource  instance0
DataSource initialized
INFO5862ms (+5861) 11:56:24 PM:
LogReader  instance0
LogReader initialized
INFO1ms (+1) 11:56:18 PM:
global
Logger initialized

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

Reload with logging
and debugging disabled.

More DataTable Control (beta) Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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