DataTables events unbound when using jquery split plugin

JimmyLuis

Hello,

I am using the jquery split plugin which basically display a DataTables table on the main side and an html textarea on the flip side.
When I go from the flip side to the heads side ( = showing the datatable), all datatables events are just gone unbound including search events, filter events, pagination events, etc... I don't know why this happen and how to solve this. I've tried to destroy the table and recreate it with fnDestroy or just refresh the table with fnAjaxReload which works ok but only that the events do not get bound.

Here is the code:

[code]
var self = this;
$('.flipButton').bind("click",function(){
var elem = $(".myDatatableDiv");
if(elem.data('flipped'))
{
elem.revertFlip();
elem.data('flipped',false);
//here I've tried self.datatable.fnDestroy();
// then self.datatable.dataTable();
// even self.datatable.fnAjaxReload(); but none worked
self.datatable.dataTable();


}
else
{
elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
elem.html(elem.siblings('.myTextArea').html());
},
color:'white'
});
elem.data('flipped',true);
}
});
[/code]

Thanks for any tips,
Jimmy

allan

> var elem = $(".myDatatableDiv");

...

> elem.html(elem.siblings('.myTextArea').html());

You are rewriting the HTML of the page - nuking the DOM elements which events attached with new elements which don't have the events attached.

You need to use `append` or similar to add elements to the DOM and not rewrite ones you want to keep.

Allan

JimmyLuis

Thanks Allan, that was a pure JavaScript problem, now works well with jQuery append() function.