Example: DataTable - XML Data Over XHR (YUI Library)

# DataTable Widget :: XML Data Over XHR

### Sample Code

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="651" 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></BusinessUrl> <BusinessClickUrl></BusinessClickUrl> </Result> ... <Result> <Title>Round Table Pizza Sunnyvale</Title> <Address>665 S Bernardo Ave</Address> <City>Sunnyvale</City> <State>CA</State> <Phone>(408) 732-6670</Phone> <Latitude>37.372826</Latitude> <Longitude>-122.05688</Longitude> <Rating> <AverageRating>4</AverageRating> <TotalRatings>1</TotalRatings> <TotalReviews>1</TotalReviews> <LastReviewDate>1151049628</LastReviewDate> </Rating> <Distance>3.05</Distance> <Url>http://local.yahoo.com/details?id=21328190&stx=pizza&csz=Sunnyvale+CA&ed=vQA2RK160SyzAlzZzGZxE.nmteJA1FaPbV1aRr.yzoj3i7s.Rq2W7hxBCEe8zCtAYWLP3Coz2zSc</Url> <ClickUrl>http://local.yahoo.com/details?id=21328190&stx=pizza&csz=Sunnyvale+CA&ed=vQA2RK160SyzAlzZzGZxE.nmteJA1FaPbV1aRr.yzoj3i7s.Rq2W7hxBCEe8zCtAYWLP3Coz2zSc</ClickUrl> <MapUrl>http://maps.yahoo.com/maps_result?name=Round+Table+Pizza+Sunnyvale&desc=4087326670&csz=Sunnyvale+CA&qty=9&cs=9&ed=vQA2RK160SyzAlzZzGZxE.nmteJA1FaPbV1aRr.yzoj3i7s.Rq2W7hxBCEe8zCtAYWLP3Coz2zSc&gid1=21328190</MapUrl> <BusinessUrl>http://www.roundtablepizza.com/</BusinessUrl> <BusinessClickUrl>http://www.roundtablepizza.com/</BusinessClickUrl> </Result> </ResultSet>

CSS:

/* custom css*/ #xml {margin:1em;} #xml table {border-collapse:collapse;} #xml th, #xml td {padding:.5em;border:1px solid #000;} #xml th {background-color:#696969;color:#fff;}/*dark gray*/ #xml th a {color:white;} #xml th a:hover {color:blue;} #xml .yui-dt-odd {background-color:#eee;} /*light gray*/

Markup:

<div id="xml"></div>

JavaScript:

var formatUrl = function(elCell, oRecord, oColumn, sData) { elCell.innerHTML = "<a href='" + oRecord.ClickUrl + "' target='_blank'>" + sData + "</a>"; }; var myColumnHeaders = [ {key:"Title", text:"Name", sortable:true, formatter:formatUrl}, {key:"Phone"}, {key:"City"}, {key:"AverageRating", text:"Rating", type:"number", sortable:true} ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); var myDataSource = new YAHOO.util.DataSource("./php/ylocal_proxy.php"); myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML; myDataSource.responseSchema = { resultNode: "Result", fields: ["Title","Phone","City",{key:"AverageRating",converter:YAHOO.util.DataSource.convertNumber},"ClickUrl"] }; var myDataTable = new YAHOO.widget.DataTable("xml", myColumnSet, myDataSource,{initialRequest:"query=pizza&zip=94089&results=10"});