datatable-dsget.mustache revision 819e90d415ed17d59af3a247b2ad9d6feb0c21b5
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<style scoped>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* custom styles for this example */
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example {margin:1em;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* css to counter global site css */
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example th {text-transform:none;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example table {width:auto;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example caption {display:table-caption;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="intro">
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <p>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.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <p>In this example, we render the DataTable first, then load data into it in a separate call.</p>
819e90d415ed17d59af3a247b2ad9d6feb0c21b5Luke Smith<div class="example yui3-skin-sam">
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {{>datatable-dsget-source}}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h2>Populating Your DataTable with Remote Data Using DataSource.Get</h2>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>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.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>Start with the `use()` statement:</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellyYUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>Next create a DataSource.Get instance pointing to YQL. The <a href="http://developer.yahoo.com/yql/console/">YQL Console</a> 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.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnellyvar dataSource = new Y.DataSource.Get({
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly source: "http://query.yahooapis.com/v1/public/yql?"+
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly "q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20"+
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly "and%20query%3D%27pizza%27&format=json&"+
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly "env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellydataSource.plug(Y.Plugin.DataSourceJSONSchema, {
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly resultListLocator: "query.results.Result",
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly resultFields: ["Title", "Phone", "Rating.AverageRating"]
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly success: function(e) {
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>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.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly { key: "Rating.AverageRating", label: "Rating" }
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>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.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnellyvar table = new Y.DataTable.Base({
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly columnset: cols,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly summary:"Pizza places near 98089",
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption:"Table with JSON data from YQL"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly datasource: dataSource
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly}).render("#pizza");
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>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 <a href="#fullcode">Full Code Listing</a> below.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h2 id="fullcode">Full Code Listing</h2>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {{>datatable-dsget-source}}