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