DataTable Control (beta): XML Data Over XHR With POST

This examples makes a POST query to the Yahoo! Local webservice to populate a DataTable.

Name	Phone	City	Rating
Loading data...

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

{"ResultSet":{
    "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-",
    "Result":[{
        "Title":"Pizza Depot",
        "Address":"919 E Duane Ave",
        "City":"Sunnyvale",
        "State":"CA",
        "Phone":"(408) 245-7760",
        "Latitude":"37.388537",
        "Longitude":"-122.003972",
        "Rating":{
            "AverageRating":"3.5",
            "TotalRatings":"5",
            "TotalReviews":"5",
            "LastReviewDate":"1161495667"},
        "Distance":"0.93",
        "Url":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--",
        "ClickUrl":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--",
        "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",
        "BusinessUrl":"http:\/\/pizza-depot.com\/",
        "BusinessClickUrl":"http:\/\/pizza-depot.com\/"},

...
    ]}
}

CSS:


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

Markup:


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

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.XHR_XML = 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:"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.connMethodPost = true;
16	this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
17	this.myDataSource.responseSchema = {
18	resultNode: "Result",
19	fields: ["Title","Phone","City",{key:"AverageRating",parser:YAHOO.util.DataSource.parseNumber},"ClickUrl"]
20	};
21
22	this.myDataTable = new YAHOO.widget.DataTable("xml", myColumnDefs,
23	this.myDataSource, {initialRequest:"query=pizza&zip=94089&results=10"});
24	};
25	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.XHR_XML = new function() {
        this.formatUrl = function(elCell, oRecord, oColumn, sData) {
            elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>";
        };

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("assets/php/ylocal_proxy.php?");
        this.myDataSource.connMethodPost = true;
        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("xml", myColumnDefs,
                this.myDataSource, {initialRequest:"query=pizza&zip=94089&results=10"});
    };
});

YUI Library Examples: DataTable Control (beta): XML Data Over XHR With POST

Sample Code for this Example

YUI Logger Output:

Logger Console

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: