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

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="501" totalResultsReturned="10" firstResultPosition="1">
<ResultSetMapUrl>http://maps.yahoo.com/broadband/?q1=Sunnyvale%2C+CA+94089&tt=pizza&tp=1</ResultSetMapUrl>
    <Result>
        <Title>Giovannis Pizzeria</Title>
        <Address>1127 N Lawrence Expy</Address>
        <City>Sunnyvale</City>
        <State>CA</State>
        <Phone>(408) 734-4221</Phone>
        <Latitude>37.396953</Latitude>
        <Longitude>-121.995986</Longitude>
        <Rating>
            <AverageRating>4</AverageRating>
            <TotalRatings>51</TotalRatings>
            <TotalReviews>33</TotalReviews>
            <LastReviewDate>1191207644</LastReviewDate>
        </Rating>
        <Distance>0.62</Distance>
        <Url>http://local.yahoo.com/details?id=21341983&stx=pizza&csz=Sunnyvale+CA&ed=kYc.Ba160SxZddWADEWWMRsGo0KgZ6X22_QAgTZxq3OdfrVCfCdLU9mvvJeybt8XpDhMC58HjElJAiWi</Url>
        <ClickUrl>http://local.yahoo.com/details?id=21341983&stx=pizza&csz=Sunnyvale+CA&ed=kYc.Ba160SxZddWADEWWMRsGo0KgZ6X22_QAgTZxq3OdfrVCfCdLU9mvvJeybt8XpDhMC58HjElJAiWi</ClickUrl>
        <MapUrl>http://maps.yahoo.com/maps_result?name=Giovannis+Pizzeria&desc=4087344221&csz=Sunnyvale+CA&qty=9&cs=9&ed=kYc.Ba160SxZddWADEWWMRsGo0KgZ6X22_QAgTZxq3OdfrVCfCdLU9mvvJeybt8XpDhMC58HjElJAiWi&gid1=21341983</MapUrl>
        <BusinessUrl></BusinessUrl>
        <BusinessClickUrl></BusinessClickUrl>
    </Result>
    ...
</ResultSet>

CSS:

Markup:

JavaScript:

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

var formatRating = function(elCell, oRecord, oColumn, sData) {
            elCell.innerHTML = (sData === null) ? "N/A" : YAHOO.util.Number.format(sData);
        };

var myColumnDefs = [
            {key:"Title", label:"Name", sortable:true, formatter:formatUrl},
            {key:"Phone"},
            {key:"City"},
            {key:"AverageRating", label:"Rating",formatter:formatRating, sortable:true}
        ];

var myDataSource = new YAHOO.util.DataSource("assets/php/ylocal_proxy.php?");
        myDataSource.connMethodPost = true;
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
        myDataSource.responseSchema = {
            resultNode: "Result",
            fields: ["Title","Phone","City",{key:"AverageRating",parser:"number"},"ClickUrl"]
        };

var myDataTable = new YAHOO.widget.DataTable("xml", myColumnDefs,
                myDataSource, {initialRequest:"query=pizza&zip=94089&results=10"});

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:

More DataTable Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.