YUI Library Home

YUI Library Examples: DataTable Control: Local XML Data

DataTable Control: Local XML Data

This DataTable is populated with XML data from a webservice that is held in local memory in the JavaScript variable xmlDoc.

View example in new window.

Sample Code for this Example

Data:

1<?xml version="1.0"?> 
2<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"> 
3    <ResultSetMapUrl>http://local.yahoo.com/mapview?stx=pizza&csz=Sunnyvale%2C+CA+94089&city=Sunnyvale&state=CA&radius=15&ed=9brhZa131DwigChqKlCo22kM1H_9WgoouCr87Ao-</ResultSetMapUrl> 
4    <Result> 
5        <Title>Pizza Depot</Title> 
6        <Address>919 E Duane Ave</Address> 
7        <City>Sunnyvale</City> 
8        <State>CA</State> 
9        <Phone>(408) 245-7760</Phone> 
10        <Latitude>37.388537</Latitude> 
11        <Longitude>-122.003972</Longitude> 
12        <Rating> 
13            <AverageRating>3.5</AverageRating> 
14            <TotalRatings>5</TotalRatings> 
15            <TotalReviews>5</TotalReviews> 
16            <LastReviewDate>1161495667</LastReviewDate> 
17        </Rating> 
18        <Distance>0.93</Distance> 
19        <Url>http://local.yahoo.com/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--</Url> 
20        <ClickUrl>http://local.yahoo.com/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--</ClickUrl> 
21        <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> 
22        <BusinessUrl>http://pizza-depot.com/</BusinessUrl> 
23        <BusinessClickUrl>http://pizza-depot.com/</BusinessClickUrl> 
24    </Result> 
25    ... 
26</ResultSet> 
view plain | print | ?

CSS:

1/* No custom CSS. */ 
view plain | print | ?

Markup:

1<div id="localxml"></div> 
view plain | print | ?

JavaScript:

1YAHOO.util.Event.addListener(window, "load", function() { 
2    YAHOO.example.Local_XML = function() { 
3        var myDataSource, myDataTable; 
4         
5        var connectionCallback = { 
6            success: function(o) { 
7                var xmlDoc = o.responseXML; 
8 
9                var myColumnDefs = [ 
10                    {key:"Title", label:"Name", sortable:true, formatter:"link"}, 
11                    {key:"Phone"}, 
12                    {key:"City"}, 
13                    {key:"AverageRating", label:"Rating",formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} 
14                ]; 
15 
16                myDataSource = new YAHOO.util.DataSource(xmlDoc); 
17                myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML; 
18                myDataSource.responseSchema = { 
19                    resultNode: "Result", 
20                    fields: ["Title","Phone","City",{key:"AverageRating",parser:"number"},"ClickUrl"] 
21                }; 
22 
23                myDataTable = new YAHOO.widget.DataTable("localxml", myColumnDefs, myDataSource); 
24 
25            }, 
26            failure: function(o) { 
27 
28            } 
29        }; 
30 
31        var getXML = YAHOO.util.Connect.asyncRequest("GET", 
32                "assets/php/ylocal_proxy.php?query=pizza&zip=94089&results=10", 
33                connectionCallback); 
34                 
35        return { 
36            oDS: myDataSource, 
37            oDT: myDataTable 
38        }; 
39    }(); 
40}); 
view plain | print | ?

YUI Logger Output:

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

Reload with logging
and debugging enabled.

More DataTable Control Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings