DataTable in a Facebox popup not working

pelted

I've had some success with various DataTables and integrating Ajax data sources with CakePHP. One view I have uses Facebox to popup a datatable in a popup. For simplicity right now, the table is in a div on the page but not visible.

[code]


thead, tbody and data here.


[/code]

The issue I'm having is that the datables features just don't work when in the popup. The filter (search) bar displays, as does pagination and sorting, but none of those features do anything. If I make the parent div visible, thus showing at the bottom of the page, then all works as expected. Any ideas about why the table elements just don't respond?

ppadron

It happens because facebox clones your container div and inserts it inside the facebox div, but your datatables events aren't cloned.

You'll have to clone your datatable by yourself, using clone(true, true), which will clone all events from the matching element and all its children.

To work around this problem, I decided to initialize the facebox div in the fnDrawCallback:

[code]
$("#mytable").dataTable({

// other options here...

"fnDrawCallback": function() {
$.facebox($("#mytable_wrapper").clone(true, true));
}
});
[/code]