YUI 3.x Home -

YUI Library Examples: DataTable: DataTable + DataSource.IO + XML Data

DataTable: DataTable + DataSource.IO + XML Data

This example shows how to populate a DataTable with data from the Yahoo! Local webservice retrieved via a same-domain PHP proxy. First we create a DataSource.IO instance pointing to the proxy, then using the DataTableDataSource plugin we can load data for Chinese restaurants near our office.

In this example, we set the initialRequest value in the DataTableDataSource plugin constructor so that the initial data is loaded first and then the DataTable is rendered in a separate call.

Note: XML parsing currently has known issues on the Android WebKit browser.

View example in new window.

Populating Your DataTable with Remote Data using DataSource.IO

Your table can be easily populated with XML data from your back-end 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-io", "datasource-xmlschema", "datatable-datasource", function(Y) {
  2. });
  3.  
YUI().use("datasource-io", "datasource-xmlschema", "datatable-datasource", function(Y) {
});
 

Next create a DataSource.IO instance pointing to your data. (Note that for the example to point the Yahoo! Local webservice, you need to bypass cross-domain browser restrictions on XHR by creating a locally served proxy. You do not need to implement such a proxy when your data is accessed from the same domain.) 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.IO({
  2.     source:"ylocal_proxy.php?zip=94089&query=chinese"
  3. });
  4.  
  5. dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
  6.     schema: {
  7.         resultListLocator: "Result",
  8.         resultFields: [
  9.             {key:"Title", locator:"*[local-name() ='Title']"},
  10.             {key:"Phone", locator:"*[local-name() ='Phone']"},
  11.             {key:"Rating", locator:"*[local-name()='Rating']/*[local-name()='AverageRating']"}
  12.         ]
  13.     }
  14. });
  15.  
  16. dataSource.sendRequest({    
  17.     callback: {
  18.         success: function (e) {
  19.             Y.log(e);
  20.         }
  21.     }
  22. });
  23.  
var dataSource = new Y.DataSource.IO({
    source:"ylocal_proxy.php?zip=94089&query=chinese"
});
 
dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
    schema: {
        resultListLocator: "Result",
        resultFields: [
            {key:"Title", locator:"*[local-name() ='Title']"},
            {key:"Phone", locator:"*[local-name() ='Phone']"},
            {key:"Rating", locator:"*[local-name()='Rating']/*[local-name()='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 = ["Title", "Phone", "Rating"];
  2.  
var cols = ["Title", "Phone", "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, and set an initialRequest value so that the initial data loads right way. Then call render() after the data response has been processed.

  1. var cols = ["Title", "Phone", "Rating"];
  2.  
  3. var dataSource = new Y.DataSource.IO({
  4.     source:"ylocal_proxy.php?zip=94089&query=chinese"
  5. });
  6.  
  7. dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
  8.     schema: {
  9.         resultListLocator: "Result",
  10.         resultFields: [
  11.             {key:"Title", locator:"*[local-name() ='Title']"},
  12.             {key:"Phone", locator:"*[local-name() ='Phone']"},
  13.             {key:"Rating", locator:"*[local-name()='Rating']/*[local-name()='AverageRating']"}
  14.         ]
  15.     }
  16. });
  17.  
  18. var table = new Y.DataTable.Base({
  19.     columnset: cols,
  20.     summary: "Chinese restaurants near 98089",
  21.     caption: "Table with XML data from same-domain script"
  22. });
  23. table.plug(Y.Plugin.DataTableDataSource, {
  24.     datasource: dataSource,
  25.     initialRequest: ""
  26. });
  27.  
  28. dataSource.after("response", function() {
  29.     table.render("#pizza")}
  30. );
  31.  
var cols = ["Title", "Phone", "Rating"];
 
var dataSource = new Y.DataSource.IO({
    source:"ylocal_proxy.php?zip=94089&query=chinese"
});
 
dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
    schema: {
        resultListLocator: "Result",
        resultFields: [
            {key:"Title", locator:"*[local-name() ='Title']"},
            {key:"Phone", locator:"*[local-name() ='Phone']"},
            {key:"Rating", locator:"*[local-name()='Rating']/*[local-name()='AverageRating']"}
        ]
    }
});
 
var table = new Y.DataTable.Base({
    columnset: cols,
    summary: "Chinese restaurants near 98089",
    caption: "Table with XML data from same-domain script"
});
table.plug(Y.Plugin.DataTableDataSource, {
    datasource: dataSource,
    initialRequest: ""
});
 
dataSource.after("response", function() {
    table.render("#pizza")}
);
 

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.

Here's the code to run the whole example:

  1. YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
  2.     var cols = ["Title", "Phone", "Rating"];
  3.  
  4.     var dataSource = new Y.DataSource.IO({
  5.         source: "ylocal_proxy.php?"
  6.     });
  7.  
  8.     dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
  9.         schema: {
  10.             resultListLocator: "Result",
  11.             resultFields: [
  12.                 {key:"Title", locator:"*[local-name() ='Title']"},
  13.                 {key:"Phone", locator:"*[local-name() ='Phone']"},
  14.                 {key:"Rating", locator:"*[local-name()='Rating']/*[local-name()='AverageRating']"}
  15.             ]
  16.         }
  17.     });
  18.  
  19.     var table = new Y.DataTable.Base({
  20.         columnset: cols,
  21.         summary: "Chinese restaurants near 98089",
  22.         caption: "Table with XML data from same-domain script"
  23.     });
  24.  
  25.     table.plug(Y.Plugin.DataTableDataSource, {
  26.         datasource: dataSource,
  27.         initialRequest: "zip=94089&query=chinese"
  28.     });
  29.  
  30.     dataSource.after("response", function() {
  31.         table.render("#pizza")}
  32.     );
  33.  
  34.     // Make another request later
  35.     //table.datasource.load({request:"zip=94089&query=pizza"});
  36. });
  37.  
YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
    var cols = ["Title", "Phone", "Rating"];
 
    var dataSource = new Y.DataSource.IO({
        source: "ylocal_proxy.php?"
    });
 
    dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
        schema: {
            resultListLocator: "Result",
            resultFields: [
                {key:"Title", locator:"*[local-name() ='Title']"},
                {key:"Phone", locator:"*[local-name() ='Phone']"},
                {key:"Rating", locator:"*[local-name()='Rating']/*[local-name()='AverageRating']"}
            ]
        }
    });
 
    var table = new Y.DataTable.Base({
        columnset: cols,
        summary: "Chinese restaurants near 98089",
        caption: "Table with XML data from same-domain script"
    });
 
    table.plug(Y.Plugin.DataTableDataSource, {
        datasource: dataSource,
        initialRequest: "zip=94089&query=chinese"
    });
 
    dataSource.after("response", function() {
        table.render("#pizza")}
    );
 
    // Make another request later
    //table.datasource.load({request:"zip=94089&query=pizza"});
});
 

More DataTable Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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