cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<style scoped>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* css to counter global site css */
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith.example table {
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith width: auto;
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith.example caption {
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith display: table-caption;
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith.example td {
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith border: 0 none;
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith text-transform :none;
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="intro">
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith This example shows how to populate a DataTable with data from the
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith Yahoo! Local webservice retrieved via a YQL query. First we create a
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith DataSource.Get instance pointing to YQL, then using the
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith DataTableDataSource plugin we can load data for pizza places near our
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith In this example, we render the DataTable first, then load data into it
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith in a separate call.
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>
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith Your table can be easily popluated with remote JSON data from a JSONP
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith webservice by creating a DataSource instance and using the
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith DataTableDataSource plugin to load the data into a DataTable.
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>Start with the `use()` statement:</p>
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke SmithYUI().use("datatable", "datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith Next create a DataSource.Get instance pointing to YQL. The <a
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith href="http://developer.yahoo.com/yql/console/">YQL Console</a> makes it
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith easy to determine the REST URL we want to send. You also need to define the
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith correct schema for the DataSourceJSONSchema plugin.
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",
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith resultFields: [ "Title", "Phone", "Rating" ]
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith This is a good time to call `sendRequest` to make sure the data returns as
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly success: function(e) {
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith "results": {
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith "Title" : "Giovannis Pizzeria",
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith "Phone" : "(408) 734-4221",
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith "AverageRating": "4",
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith "Title" : "Pizza",
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith "Phone" : "(800) 555-1212",
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith "AverageRating":"NaN",
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith Uh oh. The `Rating` data we're receiving is an object rather than a single value. It looks like `Rating.AverageRating` is what we want, but it's a numeric string, and sometimes the unfortunate value "NaN".
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith We'll add a `locator` to the schema to extract the `Rating.AverageRating`
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith value for our `Rating` data field, and also a `parser` that will convert
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith the numeric string into a real number, using `-1` for restaurants that
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith haven't received a rating yet. It's a good policy to store the table model
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith data as the appropriate type.
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith resultListLocator: "query.results.Result",
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith resultFields: [
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith key: "Rating",
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith parser: function (val) {
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith return isNaN(val) : -1 : +val;
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith Now that the DataSource is created properly, define the columns that you
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith want your table to show. These columns map directly to the parameter names
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith returned in the data. We'll add a formatter to the `Rating` column to
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith deal with those `-1`s, instead displaying "(none)".
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith key: "Rating",
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith formatter: function (o) {
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith // formatters can either return the new content or update o.value
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith if (o.value === -1) {
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith Now you are ready to create a DataTable using the columns you have defined.
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith When you plug the instance with the DataTableDataSource plugin, point to
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith your DataSource instance. After you render the table, load the data via the
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smithvar table = new Y.DataTable({
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith columns : cols,
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith summary : "Pizza places near 98089",
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith caption : "Table with JSON data from YQL"
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smithtable.plug(Y.Plugin.DataTableDataSource, { datasource: dataSource });
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith One final change you can make is to split the URL between the DataSource
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith `source` value and the `request` value sent to the DataTableDataSource
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith plugin. Splitting the URL this way facilitates making future requests to
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith the same DataSource. You can see this in the <a href="#fullcode">Full Code
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith Listing</a> below.
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h2 id="fullcode">Full Code Listing</h2>
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith{{>datatable-dsget-source}}
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith<h3>Lighten the module payload</h3>
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith The `datatable` module includes a number of features not used in this
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith example. For a smaller module payload, use the `datatable-base` module.
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith// datatable-base includes only basic table rendering, but in this case,
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith// that's enough.
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke SmithYUI().use("datatable-base", "datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith var table = new Y.DataTable({
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith columns : cols,
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith summary : "Pizza places near 98089",
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith caption : "Table with JSON data from YQL"
68dfd2985f43ea9d8de9e52fa68ab5274917c045Luke Smith table.plug(Y.Plugin.DataTableDataSource, { datasource: dataSource });