<div id="template" class="yui3-skin-sam dt-example"></div>
<div id="function" class="yui3-skin-sam dt-example"></div>
<div id="dates" class="yui3-skin-sam dt-example"></div>
<script type="text/javascript">
YUI().use("datatype-date", "datatable-base-deprecated", function (Y) {
var colsTemplate = ["id","name", {key:"price", formatter:"${value}"}],
dataTemplate = [
{id:"ga-3475", name:"gadget", price:6.99},
{id:"sp-9980", name:"sprocket", price:3.75},
{id:"wi-0650", name:"widget", price:4.25}
],
dtTemplate = new Y.DataTable.Base({columnset:colsTemplate, recordset:dataTemplate,
caption:"Data formatting with string template"}).render("#template"),
// o = {tbody, tr, classnames, rowindex, record, column, data, value}
calculate = function(o){
var record = o.record;
return "$"+(record.getValue("price")-record.getValue("cost"));
},
colsFunction = [
"id",
"name",
{ key: "profit", formatter: calculate }
],
dataFunction = [
{id:"ga-3475", name:"gadget", price:6.99, cost:4.99},
{id:"sp-9980", name:"sprocket", price:3.75, cost:2.75},
{id:"wi-0650", name:"widget", price:4.25, cost:3.25}
],
dtFunction = new Y.DataTable.Base({columnset:colsFunction, recordset:dataFunction,
caption:"Data formatting with custom function"}).render("#function"),
// o = {tbody, tr, classnames, rowindex, record, column, data, value}
formatDates = function(o){
return o.value &&
Y.DataType.Date.format(o.value, {format:"%m/%d/%Y"});
},
colsDates = [
"id",
"name",
{ key: "date", formatter: formatDates, emptyCellValue: "(unknown)" }
],
dataDates = [
{id:"ga-3475", name:"gadget", date:new Date(2006, 5, 1)},
{id:"sp-9980", name:"sprocket", date:new Date(2004, 8, 16)},
{id:"wi-0650", name:"widget"} // no date for this record
],
dtDates = new Y.DataTable.Base({
columnset: colsDates,
recordset: dataDates,
caption: "Data formatting with DataType.Date"
}).render("#dates");
});
</script>