YUI-grid: re load data - yui

Question

Hi guys
I am try to research Yahoo lib- grid. I created a button to display grid. But when i click button N times -> it is displayed N grids. I only want display one grid and after click button it will get data from server again. My code like below:
Please help me., Thank you.
YUI({ filter: 'raw' }).use("jsonp", "node",function (Y) {
function handleJSONP(response) {
// Y.one("#out").setContent(Y.Lang.sub(template, response.user));
YUI().use("datatable-base", function(Y) {
var cols = [
{ key: "id", label: "Transaction No", abbr: "id"},
{ key: "userName", label: "User Name", abbr: "userName"},
{ key: "storeName", label: "StoreName", abbr: "storeName"}
],
data = response.Root,
dt = new Y.DataTable.Base({
columnset: cols,
recordset: data,
summary: "Price sheet for inventory parts",
caption: "These columns have labels and abbrs"
}).render("#example");
});
}
Y.one("#demo_btn").on("click", function (e) {
var url = "server.jsp"+ "?callback={callback}";
Y.jsonp(url, handleJSONP);
});
});

Answer 1

You should be using the DataSource utility to retrieve the data via JSONP. This will allow you to then reload the data via something like
dt.datasource.load();
See the docs for details: DataTable + DataSource.Get + JSON Data
Your handler needs to check if you've already created the table.
var dt;
if (dt === null) {
dt = new Y.DataTable.Base // etc.
}