<div id="pizza"></div>

<script>
YUI().use("datatable", "datasource-get", "datasource-jsonschema", "datatable-datasource", function (Y) {

    var url = "http://query.yahooapis.com/v1/public/yql?format=json" +
                  "&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys",
        query = "&q=" + encodeURIComponent(
                'select * from local.search ' +
                'where zip = "94089" and query = "pizza"'),
        dataSource,
        table;

    dataSource = new Y.DataSource.Get({ source: url });

    dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
        schema: {
            resultListLocator: "query.results.Result",
            resultFields: [
                "Title",
                "Phone",
                {
                    key: "Rating",
                    locator: "Rating.AverageRating",
                    parser: function (val) {
                        // YQL is returning "NaN" for unrated restaurants
                        return isNaN(val) ? -1 : +val;
                    }
                }
            ]
        }
    });

    table = new Y.DataTable({
        columns: [
            "Title",
            "Phone",
            {
                key: "Rating",
                formatter: function (o) {
                    if (o.value === -1) {
                        o.value = '(none)';
                    }
                }
            }
        ],
        summary: "Pizza places near 98089",
        caption: "Table with JSON data from YQL"
    });
    
    table.plug(Y.Plugin.DataTableDataSource, { datasource: dataSource });

    table.render("#pizza");

    table.datasource.load({
        request: query,
        
        callback: { 
            success: function (e) {
                table.datasource.onDataReturnInitializeTable(e);
            },
            failure: function() {
                Y.one('#pizza').setHTML(
                    'The data could not be retrieved. Please <a href="?mock=true">try this example with mocked data</a> instead.');
            }
        }
    });
});
</script>
