YUI Library Home

Site Search (YDN & YUIBlog):

# 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:

<?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:

/* No custom CSS. */

Markup:

<div id="localxml"></div>

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.Local_XML = function() { var myDataSource, myDataTable; var connectionCallback = { success: function(o) { var xmlDoc = o.responseXML; var myColumnDefs = [ {key:"Title", label:"Name", sortable:true, formatter:"link"}, {key:"Phone"}, {key:"City"}, {key:"AverageRating", label:"Rating",formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} ]; myDataSource = new YAHOO.util.DataSource(xmlDoc); myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML; myDataSource.responseSchema = { resultNode: "Result", fields: ["Title","Phone","City",{key:"AverageRating",parser:"number"},"ClickUrl"] }; myDataTable = new YAHOO.widget.DataTable("localxml", myColumnDefs, myDataSource); }, failure: function(o) { } }; var getXML = YAHOO.util.Connect.asyncRequest("GET", "assets/php/ylocal_proxy.php?query=pizza&zip=94089&results=10", connectionCallback); return { oDS: myDataSource, oDT: myDataTable }; }(); });

### YUI Logger Output:

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

Reload with logging
and debugging enabled.

### DataTable Control Examples:

- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Conditional row coloring
- Nested Headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- Textual Data Over XHR
- Local XML Data
- Adding and Deleting Rows
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination and Sorting for Dynamic Data
- XY-scrolling, Y-scrolling, and X-scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Showing, Hiding, and Reordering Columns.
- Highlighting Cells, Rows, or Columns
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model
- Configuring the Paginator (included with examples for Paginator)
- Complex Application (included with examples for Layout Manager)

### More DataTable Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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