How to apply Datatable on a HTML table create dynamically?

Kyvu

Hello,

I would like to apply the DataTable on a HTML table create dynamically with an ajax procedure. Seems that it is not so simple for me.

On document ready, I have created on the DOM an empty div called "#floatinfobox". The HTML table "#mydatatablegroupeb1" do not exist yet.

When I make a double click on a certain element of the web page: it calls an ajax procedure that retrieve infos from MySql, create a new HTML table "#mydatatablegroupeb1" placed in "#floatinfobox", apply to this new table the DataTable and finally show the "#floatinfobox" with JQuery UI on modal mode.

Sample HTML code:

[code]




[/code]

JQuery code when double click:

[code]

$("table[id*=mydatatablegroupea] tbody tr").dblclick(function(){

//Create here the ajax string that contains infos for MySql query...

//Call the "go" ajax procedure, the HTML table "#mydatatablegroupeb1" is create on the fly in "#floatinfobox"
go("test.showdetail.php", "floatinfobox", ajaxstring);

//Apply the DataTable!
$("#mydatatablegroupeb1").dataTable({
"aaSorting": [],
"sScrollY": "400px",
"bPaginate": false,
"bScrollCollapse": true,
"bRetrieve": true,
"bAutoWidth": false
});

//Show the popup
$("#floatinfobox").dialog("open");

});

[/code]

The data from MySql are ok, the new HTML table is well created, the JQuery UI dialog box appears correctly... but unfortunatly the DataTable pluging is not applied on the new table.

Could you please help?

Thanks in advance.