YUI 3.x Home -

YUI Library Examples: DataTable: DataTable + DataSource.Get + JSON Data

DataTable: DataTable + DataSource.Get + JSON Data

This example shows how to populate a DataTable with data from the Yahoo! Local webservice retrieved via a YQL query. First we create a DataSource.Get instance pointing to YQL, then using the DataTableDataSource plugin we can load data for pizza places near our office.

In this example, we render the DataTable first, then load data into it in a separate call.

View example in new window.

Populating Your DataTable with Remote Data Using DataSource.Get

Your table can be easily popluated with remote JSON data from a webservice by creating a DataSource instance and using the DataTableDataSource plugin to load the data into a DataTable.

Start with the use() statement:

  1. YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
  2. });
  3.  
YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
});
 

Next create a DataSource.Get instance pointing to YQL. The YQL Console makes it easy to determine the REST URL we want to send. You also need to define the correct schema for the DataSourceJSONSchema plugin. This is a good time to call sendRequest to make sure the data returns as expected.

  1. var dataSource = new Y.DataSource.Get({
  2.     source: "http://query.yahooapis.com/v1/public/yql?"+
  3.         "q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20"+
  4.         "and%20query%3D%27pizza%27&format=json&"+
  5.         "env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
  6. });
  7.  
  8. dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
  9.     schema: {
  10.         resultListLocator: "query.results.Result",
  11.         resultFields: ["Title", "Phone", "Rating.AverageRating"]
  12.     }
  13. });
  14.  
  15. dataSource.sendRequest({
  16.     callback: {
  17.         success: function(e) {
  18.             Y.log(e);
  19.         }
  20.     }
  21. });
  22.  
var dataSource = new Y.DataSource.Get({
    source: "http://query.yahooapis.com/v1/public/yql?"+
        "q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20"+
        "and%20query%3D%27pizza%27&format=json&"+
        "env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
});
 
dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
    schema: {
        resultListLocator: "query.results.Result",
        resultFields: ["Title", "Phone", "Rating.AverageRating"]
    }
});
 
dataSource.sendRequest({
    callback: {
        success: function(e) {
            Y.log(e);
        }
    }
});
 

Now that the DataSource is created properly, define the columns that you want your table to show. These columns map directly to the parameter names returned in the data.

  1. var cols = [
  2.     "Title",
  3.     "Phone",
  4.     { key: "Rating.AverageRating", label: "Rating" }
  5. ];
  6.  
var cols = [
    "Title",
    "Phone",
    { key: "Rating.AverageRating", label: "Rating" }
];
 

Now you are ready to create a DataTable using the columns you have defined. When you plug the instance with the DataTableDataSource plugin, point to your DataSource instance. After you render the table, load the data via the plugin.

  1. YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
  2. var table = new Y.DataTable.Base({
  3.     columnset: cols,
  4.     summary:"Pizza places near 98089",
  5.     caption:"Table with JSON data from YQL"
  6. });
  7.  
  8. table.plug(Y.Plugin.DataTableDataSource, {
  9.     datasource: dataSource
  10. }).render("#pizza");
  11.  
  12. table.datasource.load();
  13.  
YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
var table = new Y.DataTable.Base({
    columnset: cols,
    summary:"Pizza places near 98089",
    caption:"Table with JSON data from YQL"
});
 
table.plug(Y.Plugin.DataTableDataSource, {
    datasource: dataSource
}).render("#pizza");
 
table.datasource.load();
 

One final change you can make is to split the URL between the DataSource source value and the request value sent to the DataTableDataSource plugin. Splitting the URL this way facilitates making future requests to the same DataSource. You can see this in the Full Code Listing below.

Full Code Listing

  1. YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
  2.     var cols = [
  3.             "Title",
  4.             "Phone",
  5.             { key: "Rating.AverageRating", label: "Rating" }
  6.         ];
  7.  
  8.     var dataSource = new Y.DataSource.Get({
  9.         source: "http://query.yahooapis.com/v1/public/yql?&" +
  10.                 "format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
  11.     });
  12.  
  13.     dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
  14.         schema: {
  15.             resultListLocator: "query.results.Result",
  16.             resultFields: ["Title", "Phone", "Rating.AverageRating"]
  17.         }
  18.     });
  19.  
  20.     var table = new Y.DataTable.Base({
  21.         columnset: cols,
  22.         summary: "Pizza places near 98089",
  23.         caption: "Table with JSON data from YQL"
  24.     });
  25.  
  26.     table.plug(Y.Plugin.DataTableDataSource, {
  27.         datasource: dataSource
  28.     }).render("#pizza");
  29.  
  30.     // Load the data into the table
  31.     table.datasource.load({
  32.         request: "&q=select%20*%20from%20local.search%20" +
  33.                  "where%20zip%3D%2794089%27%20and%20query%3D%27pizza%27"
  34.     });
  35.  
  36.     // Make another request later
  37.     //table.datasource.load({
  38.     //    request: "&q=select%20*%20from%20local.search%20" +
  39.     //             "where%20zip%3D%2794089%27%20and%20query%3D%27chinese%27"
  40.     //});
  41. });
  42.  
YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
    var cols = [
            "Title",
            "Phone",
            { key: "Rating.AverageRating", label: "Rating" }
        ];
 
    var dataSource = new Y.DataSource.Get({
        source: "http://query.yahooapis.com/v1/public/yql?&" +
                "format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
    });
 
    dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
        schema: {
            resultListLocator: "query.results.Result",
            resultFields: ["Title", "Phone", "Rating.AverageRating"]
        }
    });
 
    var table = new Y.DataTable.Base({
        columnset: cols,
        summary: "Pizza places near 98089",
        caption: "Table with JSON data from YQL"
    });
 
    table.plug(Y.Plugin.DataTableDataSource, {
        datasource: dataSource
    }).render("#pizza");
 
    // Load the data into the table
    table.datasource.load({
        request: "&q=select%20*%20from%20local.search%20" +
                 "where%20zip%3D%2794089%27%20and%20query%3D%27pizza%27"
    });
 
    // Make another request later
    //table.datasource.load({
    //    request: "&q=select%20*%20from%20local.search%20" +
    //             "where%20zip%3D%2794089%27%20and%20query%3D%27chinese%27"
    //});
});
 

More DataTable Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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