"Maximize" A dataTable

MikeS

I have several dataTables displayed on a page of "widgets". I'd like to have the ability to maximize a widget by displaying the dataTable in a jQuery UI Dialog. I'm trying to accomplish this by cloning the widget then appending it to the div (_popup) that the dialog operates on.

It works in that I see the dataTable in the dialog. What doesn't work are the events that trigger column sorting, paging, etc. They don't do anything to the dataTable showing *in* the dialog. What I see happening is that as I click a column header of the dataTable showing in the dialog, the *underlying* dataTable in the widget (the original one on the page below the dialog) is sorted!! All events on the dataTable in the dialog trigger an action on the dataTable that was cloned and not the cloned dataTable itself.

Does any jQuery guru know where I may be going wrong with this? Unfortunately I don't have a URL that I can share. I'm using the option to include data and events when cloning the widget. See below for code that I'm trying:

[code]
$("body").append('');
$('div#8').clone(true).appendTo('#_popup');
$("div#_popup")
.dialog({
title: 'Maximized dataTable'
,autoOpen: false
,modal: true
,width: 500px
,height: 600px
,buttons: [
{ id: "btnclose"
,text: "Done"
,click: function() { $(this).dialog('close'); }
}
]
,open: function(ev, ui) {
$(this).parent().find('button#btnclose').focus();
}
,close: function(ev, ui) {
$(this).dialog('destroy').remove();
$("div#_popup").empty().remove();
}
});

$("div#_popup").dialog("open");
[/code]

allan

You are only cloning the nodes, not the DataTable - so the nodes still point to the original DataTable, hence the problem you are seeing.

There isn't a built in way to clone a DataTable, you'd need to reconstruct it in your pop up I'm afraid.

Allan