YUI Library JavaScript DHTML


            

    
Textual Data Over XHR

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}










/* custom styles for this example */
#textWithHeaderData {margin-top:2em;}




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().



YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.XHR_Text = function() {
        var formatUrl = function(elCell, oRecord, oColumn, sData) {
            elCell.innerHTML = "" + sData + "";
        };
        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("yui_2.7.0b-assets/datatable-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("yui_2.7.0b-assets/datatable-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_2.7.0b.zip( 4,431 k)