YUI Library Examples: DataTable Control (beta): JSON Data Over XHR
DataTable Control (beta): JSON Data Over XHR
This example populates a DataTable with data received via XHR from the Yahoo! Local webservice.
Sample Code for this Example
Data:
| 1 | {"ResultSet":{ |
| 2 | "totalResultsAvailable":665, |
| 3 | "totalResultsReturned":10, |
| 4 | "firstResultPosition":1, |
| 5 | "ResultSetMapUrl":"http:\/\/local.yahoo.com\/mapview?stx=pizza&csz=Sunnyvale%2C+CA+94089&city=Sunnyvale&state=CA&radius=15&ed=9brhZa131DwigChqKlCo22kM1H_9WgoouCr87Ao-", |
| 6 | "Result":[{ |
| 7 | "Title":"Pizza Depot", |
| 8 | "Address":"919 E Duane Ave", |
| 9 | "City":"Sunnyvale", |
| 10 | "State":"CA", |
| 11 | "Phone":"(408) 245-7760", |
| 12 | "Latitude":"37.388537", |
| 13 | "Longitude":"-122.003972", |
| 14 | "Rating":{ |
| 15 | "AverageRating":"3.5", |
| 16 | "TotalRatings":"5", |
| 17 | "TotalReviews":"5", |
| 18 | "LastReviewDate":"1161495667"}, |
| 19 | "Distance":"0.93", |
| 20 | "Url":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--", |
| 21 | "ClickUrl":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--", |
| 22 | "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", |
| 23 | "BusinessUrl":"http:\/\/pizza-depot.com\/", |
| 24 | "BusinessClickUrl":"http:\/\/pizza-depot.com\/"}, |
| 25 | |
| 26 | ... |
| 27 | ]} |
| 28 | } |
| view plain | print | ? |
CSS:
| 1 | /* No custom CSS. */ |
| view plain | print | ? |
Markup:
| 1 | <div id="json"></div> |
| view plain | print | ? |
JavaScript:
| 1 | YAHOO.util.Event.addListener(window, "load", function() { |
| 2 | YAHOO.example.XHR_JSON = new function() { |
| 3 | this.formatUrl = function(elCell, oRecord, oColumn, sData) { |
| 4 | elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>"; |
| 5 | }; |
| 6 | |
| 7 | var myColumnDefs = [ |
| 8 | {key:"Title", label:"Name", sortable:true, formatter:this.formatUrl}, |
| 9 | {key:"Phone"}, |
| 10 | {key:"City"}, |
| 11 | {key:"Rating.AverageRating", label:"Rating", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} |
| 12 | ]; |
| 13 | |
| 14 | this.myDataSource = new YAHOO.util.DataSource("assets/php/ylocal_proxy.php?"); |
| 15 | this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; |
| 16 | this.myDataSource.connXhrMode = "queueRequests"; |
| 17 | this.myDataSource.responseSchema = { |
| 18 | resultsList: "ResultSet.Result", |
| 19 | fields: ["Title","Phone","City",{key:"Rating.AverageRating",parser:YAHOO.util.DataSource.parseNumber},"ClickUrl"] |
| 20 | }; |
| 21 | |
| 22 | this.myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs, |
| 23 | this.myDataSource, {initialRequest:"query=pizza&zip=94089&results=10&output=json"}); |
| 24 | |
| 25 | var callback1 = { |
| 26 | success : this.myDataTable.onDataReturnAppendRows, |
| 27 | failure : this.myDataTable.onDataReturnAppendRows, |
| 28 | scope : this.myDataTable |
| 29 | }; |
| 30 | this.myDataSource.sendRequest("query=mexican&zip=94089&results=10&output=json", |
| 31 | callback1); |
| 32 | |
| 33 | var callback2 = { |
| 34 | success : this.myDataTable.onDataReturnInsertRows, |
| 35 | failure : this.myDataTable.onDataReturnInsertRows, |
| 36 | scope : this.myDataTable |
| 37 | }; |
| 38 | this.myDataSource.sendRequest("query=chinese&zip=94089&results=10&output=json", |
| 39 | callback2); |
| 40 | }; |
| 41 | }); |
| view plain | print | ? |
YUI Logger Output:
Logger Console
INFO0ms (+0) 11:02:55 AM:global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
DataTable Control (beta) Examples:
- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- 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
- Server-side Sorting
- Server-side Pagination and Sorting, with Browser History Manager
- 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
- Complex Application (included with examples for Layout Manager (beta))
More DataTable Control (beta) Resources:
- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)
- Yahoo! UI Library
- Home (external)
- YUIBlog (external)
- YUI Discussion Forum (external)
- YUI on Sourceforge (external)
- API Documentation
- Functional Examples
- YUI Theater (external)
- YUI License (external)
- YUI Functional Examples
- Animation
- AutoComplete
- Browser History Manager
- Button
- Calendar
- Charts (experimental)
- Color Picker
- Cookie (beta)
- Connection Manager
- Container
- DataTable (beta)
- Dom
- Drag & Drop
- Event
- Get
- ImageCropper (beta)
- ImageLoader
- JSON
- Layout Manager (beta)
- Logger
- Menu
- Profiler (beta)
- ProfilerViewer (beta)
- Resize (beta)
- Rich Text Editor (beta)
- Selector (beta)
- Slider
- TabView
- TreeView
- Uploader (experimental)
- YAHOO Global Object
- YUI Loader (beta)
- YUI Test
- Reset CSS
- Base CSS
- Fonts CSS
- Grids CSS
- YUI Articles on the YUI Website
- YUI FAQ (external)
- Graded Browser Support (external)
- Bug Reports/Feature Requests (external)
- Serving YUI Files from Yahoo! (external)
- Security Best Practices (external)
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings