09 – YUI 3.5 Javascript Datasource & Datatable

How to Connect a Datasource to a Datatable.

datatable.js

[crayon language="javascript"]
YUI({ lang: “en-US” }).use(‘datatable’, ‘datatype’, ‘datasource’, function (Y) {

function formatDate(cell) {
return Y.DataType.Date.format(cell.value, { format: “%d %b %Y” });
}

function formatCurrencyCell(cell) {
return formatCurrency(cell.value);
}

function formatCurrency(number) {
format = {
suffix: ‘ €’,
thousandsSeparator: ‘,’,
decimalSeparator: ‘.’,
decimalPlaces: 2
};
return Y.DataType.Number.format(number, format);
}

var myDataSource = new Y.DataSource.Get({
source: “json_invoices.php?”
});
myDataSource.plug({fn: Y.Plugin.DataSourceJSONSchema, cfg: {
schema: {
resultListLocator: “data”,
resultFields: ["number", "issued", "amount"]
}
}});

var table = new Y.DataTable({
columns: [
{ key: "number", label: "Number" },
{ key: "issued", label: "Issue Date", formatter: formatDate },
{ key: "amount", label: "Amount", formatter: formatCurrencyCell, className: "number" },
{ key: "vat", label: "VAT", formatter: formatCurrencyCell,
className: "number" },
{ key: "total", label: "Total", formatter: formatCurrencyCell, className: "number" }
],
recordType: {
vat: {
getter : function () {
return this.get(‘amount’) * this.get(‘vatp’) / 100;
}
},
total: {
getter: function() {
return this.get(‘amount’) + this.get(‘vat’);
}
}
},
sortable: true,
caption: “Invoice List”
});

table.plug(Y.Plugin.DataTableDataSource, {
datasource: myDataSource
});
table.datasource.load({
request: encodeURIComponent(”)
});

table.render(“#invoices”);

});
[/crayon]