YUI Library Examples: DataTable Control: Textual Data Over XHR

Sample Code for this Example

Data (standard):

Data (with headers):

CSS:

Markup:

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

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: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

DataTable Control Examples:

More DataTable Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.