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.

Example: Textual Data Over XHR
Name	Phone	City	Rating
Loading...

Example: First Record Holds Header Data
Restaurant	Location	Town	Stars
Loading...

Sample Code for this Example

Data (standard):


1	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--
2	...
	view plain \| print \| ?

Data (with headers):


1	Restaurant\|Location\|Town\|Telephone\|Stars\|Website
2	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--
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:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.XHR_Text = function() {
3	var 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:formatUrl},
9	{key:"Phone"},
10	{key:"City"},
11	{key:"Rating", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true}
12
13	];
14
15	var myDataSource = new YAHOO.util.DataSource("assets/php/text_proxy.txt");
16	//myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;
17	myDataSource.responseSchema = {
18	recordDelim: "\n",
19	fieldDelim: "\|",
20	fields: ["Name","Address","City","Phone",{key:"Rating",parser:"number"},"Url"]
21	};
22
23	var myDataTable = new YAHOO.widget.DataTable("text", myColumnDefs,
24	myDataSource, {caption:"Example: Textual Data Over XHR"});
25
26
27
28	var moreColumnDefs = [
29	{key:"Restaurant", sortable:true, formatter:formatUrl},
30	{key:"Location"},
31	{key:"Town"},
32	{key:"Stars", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true}
33	];
34
35	var anotherDataSource = new YAHOO.util.DataSource("assets/php/text_with_headers_proxy.txt");
36	anotherDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;
37	anotherDataSource.responseSchema = {
38	recordDelim: "\n",
39	fieldDelim: "\|",
40	fields: ["Restaurant","Location","Town","Telephone",{key:"Stars",parser:"number"},"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	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	anotherDataTable = new YAHOO.widget.DataTable("textWithHeaderData", moreColumnDefs,
51	anotherDataSource, {caption:"Example: First Record Holds Header Data"});
52
53	return {
54	oDS: myDataSource,
55	oDT: myDataTable,
56	oDS2: anotherDataSource,
57	oDT2: anotherDataTable
58	};
59	}();
60	});
	view plain \| print \| ?

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}
        ];

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.


1	Restaurant\|Location\|Town\|Telephone\|Stars\|Website
2	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--
3	...
	view plain \| print \| ?

YUI Library Examples: DataTable Control: Textual Data Over XHR

Sample Code for this Example

YUI Logger Output:

DataTable Control Examples:

More DataTable Control Resources: