YUI Library Examples: DataTable Control (beta): Local XML Data

Sample Code for this Example

Data:

<?xml version="1.0"?>
<ResultSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:yahoo:lcl" xsi:schemaLocation="urn:yahoo:lcl http://api.local.yahoo.com/LocalSearchService/V2/LocalSearchResponse.xsd" totalResultsAvailable="665" totalResultsReturned="10" firstResultPosition="1">
    <ResultSetMapUrl>http://local.yahoo.com/mapview?stx=pizza&csz=Sunnyvale%2C+CA+94089&city=Sunnyvale&state=CA&radius=15&ed=9brhZa131DwigChqKlCo22kM1H_9WgoouCr87Ao-</ResultSetMapUrl>
    <Result>
        <Title>Pizza Depot</Title>
        <Address>919 E Duane Ave</Address>
        <City>Sunnyvale</City>
        <State>CA</State>
        <Phone>(408) 245-7760</Phone>
        <Latitude>37.388537</Latitude>
        <Longitude>-122.003972</Longitude>
        <Rating>
            <AverageRating>3.5</AverageRating>
            <TotalRatings>5</TotalRatings>
            <TotalReviews>5</TotalReviews>
            <LastReviewDate>1161495667</LastReviewDate>
        </Rating>
        <Distance>0.93</Distance>
        <Url>http://local.yahoo.com/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--</Url>
        <ClickUrl>http://local.yahoo.com/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--</ClickUrl>
        <MapUrl>http://maps.yahoo.com/maps_result?name=Pizza+Depot&desc=4082457760&csz=Sunnyvale+CA&qty=9&cs=9&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--&gid1=21332021</MapUrl>
        <BusinessUrl>http://pizza-depot.com/</BusinessUrl>
        <BusinessClickUrl>http://pizza-depot.com/</BusinessClickUrl>
    </Result>
    ...
</ResultSet>

CSS:

Markup:

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Local_XML = new function() {
        this.connectionCallback = {
            success: function(o) {
                var xmlDoc = o.responseXML;

var myColumnDefs = [
                    {key:"Title", label:"Name", sortable:true, formatter:this.formatUrl},
                    {key:"Phone"},
                    {key:"City"},
                    {key:"AverageRating", label:"Rating",formatter:YAHOO.widget.DataTable.formatNumber, sortable:true}
                ];

this.myDataSource = new YAHOO.util.DataSource(xmlDoc);
                this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
                this.myDataSource.responseSchema = {
                    resultNode: "Result",
                    fields: ["Title","Phone","City",{key:"AverageRating",parser:YAHOO.util.DataSource.parseNumber},"ClickUrl"]
                };

this.myDataTable = new YAHOO.widget.DataTable("localxml", myColumnDefs, this.myDataSource);

},
            failure: function(o) {

}
        };

this.getXML = YAHOO.util.Connect.asyncRequest("GET",
                "assets/php/ylocal_proxy.php?query=pizza&zip=94089&results=10",
                this.connectionCallback);
    };
});

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: DataTable Control (beta): Local XML Data

Sample Code for this Example

YUI Logger Output:

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: