reinitialize datatables and editor

zipper

I'm using bellow code to call draw_table to draw table for different mgmt node using one web page. in some case, the draw_table also draw an editor.
[code]
function mgmt(node) {
$.ajax({
async: false,
url: '/mgmt',
dataType: 'jsonp',
type: 'get',
jsonp: 'callback',
data: {action: 'init', mgmt_node: node},
success: function (json) {
draw_table(json);
},
error: function () {
alert('Retrieve data from server failed!');
}
});
}
[/code]

Seperately tested, mgmt('product') and mgmt(customer') works fine, but when first mgmt('product') then mgmt(customer') or vice visa I got the re-initialize issue.
I'm trying to use bellow code to fix but still have some problem now.
[code]
if ($.fn.dataTable.isDataTable('#table1')) {
$('#table1').DataTable().destroy();
}
[/code]

Please help to tell how to destroy the datatable and the editor for new data. Thanks.

allan

The code you has shown looks to be correct to me. Could you link to a page showing the issue so I can help to debug it please.

Allan

zipper

http://54.199.175.35/5 " Product Mgmt." and "Customer Mgmt."

allan

Thanks.

If I click on Product Mgmt. it loads a DataTable. Then I click on Customer Mgmt. it gives an error about style being undefined. That is happening because the DataTable is being initialised while the HTML table is empty.

It looks like the information should be coming from the JSON, which is fine, but I don't see the isDataTable check anywhere. That should be added at the top of your draw_table function, before the header, body and footer are emptied.

Allan

zipper

Thank you @allan it is fixed by adding the isDaTable check. I canceled the isDataTable check because I inserted the "destroy: true" to the datable (as well as the editor). It seems I should not modify the HTML before the datable is destroyed.

allan

Correct - otherwise DataTables will put it back since it doesn't know the HTML had been modified from under it.

Allan