<style scoped>
/* custom styles for this example */
.example .yui3-datatable {
margin-bottom: 1em;
}
/* css to counter global site css */
.example table {
width: auto;
}
.example caption {
display: table-caption;
}
.example th,
.example td {
text-transform: none;
border: 0 none;
}
</style>
<div id="chinese" class="dt-example"></div>
<script>
YUI().use("datasource-io", "datasource-xmlschema", "datatable-datasource", function (Y) {
var ds = new Y.DataSource.IO({
source:"../assets/datatable/ylocal.xml?"})
.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']",
// The data contains "NaN" for unrated restaurants
parser: function (val) {
return isNaN(val) ? '(none)' : val;
}
}
]
}
}),
dt = new Y.DataTable({
columns: ["Title", "Phone", "Rating"],
summary:"Chinese restaurants near 98089",
caption:"Table with XML data from same-domain script"
}).plug(Y.Plugin.DataTableDataSource, {
datasource: ds,
initialRequest:"zip=94089&query=chinese"
}).render("#chinese");
});
</script>