I just posted this in the YUI group but it doesn't look like that
group gets used much.
------
I would like to try to use one datasource for the YUI datatable such as
an array for the initial load of a page, then use Json over xhr for
subsequent table events such as sorting and paging. Has anyone here
done this or have suggestions on how to do it?
Here is something I tried, but doesn't seem to work, it uses 2 arrays,
but the concept is the same.
<html>
<head>
<title>Datatable Test</title>
<link type="text/css" rel="stylesheet"
href="
http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.\
css">
<script type="text/javascript"
src="
http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></\
script>
<script type="text/javascript"
src="
http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>
<script type="text/javascript"
src="
http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta-min.js"></s\
cript>
<script type="text/javascript"
src="
http://yui.yahooapis.com/2.5.1/build/connection/connection-min.js"></script\
>
<script type="text/javascript"
src="
http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta-min.js"></scr\
ipt>
</head>
<body class='yui-skin-sam'>
<button id='button'>button</button>
<div id='yuidt'></div>
</body>
<script type='text/javascript'>
YAHOO.example.Data = {
bookorders: [
{id:"po-0167", date:new Date(1980, 2, 24), quantity:1,
amount:4, title:"A Book About Nothing"},
{id:"po-0783", date:new Date("January 3, 1983"),
quantity:null, amount:12.12345, title:"The Meaning of Life"},
{id:"po-0297", date:new Date(1978, 11, 12), quantity:12,
amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
{id:"po-1482", date:new Date("March 11, 1985"), quantity:6,
amount:3.5, title:"Read Me Twice"}
]
}
YAHOO.example.Data2 = {
bookorders: [
{id:"po-1111", date:new Date(1980, 2, 24), quantity:1,
amount:4, title:"A Book About Nothing"},
{id:"po-2222", date:new Date("January 3, 1983"),
quantity:null, amount:12.12345, title:"The Meaning of Life"},
{id:"po-3333", date:new Date(1978, 11, 12), quantity:12,
amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
{id:"po-4444", date:new Date("March 11, 1985"), quantity:6,
amount:3.5, title:"Read Me Twice"}
]
}
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.Basic = new function() {
var myColumnDefs = [
{key:"id", sortable:true, resizeable:true},
{key:"date", formatter:YAHOO.widget.DataTable.formatDate,
sortable:true,
sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
{key:"quantity",
formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
resizeable:true},
{key:"amount",
formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true,
resizeable:true},
{key:"title", sortable:true, resizeable:true}
];
this.myDataSource = new
YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
this.myDataSource.responseType =
YAHOO.util.DataSource.TYPE_JSARRAY;
this.myDataSource.responseSchema = {
fields: ["id","date","quantity","amount","title"]
};
this.myDataTable = new YAHOO.widget.DataTable("yuidt",
myColumnDefs, this.myDataSource, {caption:"DataTable
Caption"});
this.myDataSource2 = new
YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
this.myDataSource2.responseType =
YAHOO.util.DataSource.TYPE_JSARRAY;
this.myDataSource2.responseSchema = {
fields: ["id","date","quantity","amount","title"]
};
YAHOO.util.Event.addListener("button", "click", function(){new
YAHOO.widget.DataTable("yuidt",
myColumnDefs, this.myDataSource2, {caption:"DataTable
Caption"}); });
};
});
</script>
</html>
Having problems with message search?
Fill out this form to ensure your group is one of the first to be migrated to the new message search system.
Offline 
Send Email