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
        };
    }();
});

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.


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

Configuration for This Example

YUI Logger Output:

Logger Console

DataTable Control Examples:

More DataTable Control Resources: