Destroy the datatable in order to recreate (tabs use)

bastien

Hi,

I just discovered and begun to use your awesome plugin datatable.

I want to use it in a page where I have 3 tabs with ajax. When I click on a tab, i load the right data and i want to put them in a datatable.

My code is like that for the click function :

[code]
var display_data = function ( datas ) {
// Generate the array of data formatted for datatable plugin
var datas_for_table = generate_array_for_datatable(datas);

$("#example").remove();
$('#example_wrapper').remove();
$('#my-list').html( '' );

$('#example').dataTable( {
//"bDestroy": true,
"aaData": datas_for_table,
"aoColumns": [
{ "sTitle": "Titre", 'sWidth': "400px" },
{ "sTitle": "Client" },
{ "sTitle": "Date","sClass": "deadline", },
{ "sTitle": "Budget", "sClass": "center" } ]
});

// Allow to resize manually the width of the columns
$("#example").colResizable();
}
[/code]

I want to destroy and recreate the datatable, so I tried to use the remove method from jQuery on the element "example_wrapper" and "example". I tried too to use the fnDestroy function but I doesn't work.

My problem is that it seems that the datatable is not removed when I remove the example dom element.

I can see that because the colResizable plugin (I prefer this one than the one you propose) works fine on the init of the page (on the first tab), but when I change to an other tab, the plugin can't work. It's not applied. When I check, i can't understan why, cause the table is there...

So, is there a simple way to remove the datatable object before to create a new one ?

Thanks by advance.

Bastien

bastien

Hi,

I just discover this post : http://datatables.net/forums/discussion/1244/how-to-re-initialize-a-datatable-reload-it-from-scratch/p1 where there is a function.

[code]
// before creating a table, make sure it is not already created.
// And if it is, then remove old version before new one is created
var currTable = $("#example");
if (currTable) {
// contains the dataTables master records
var s = $(document).dataTableSettings;
if (s != 'undefined') {
var len = s.length;
for (var i=0; i < len; i++)
{
// if already exists, remove from the array
if (s[i].sInstance = "example") {
s.splice(i,1);

$("#example").html("");
//$('#example_wrapper').html("");
//$('#proposals-list').html( '' );
}
}
}
}
[/code]

When I use it, it works for the data in the table. The css is well applied and the plugin colResizable work on the new datatable.

But, because there is a but, I saw that the element is replaced by all the content of the datatable plugin. That means that the search input, the "Show ", the previous next, are also added, so there are finally duplicated in the page each time I recreate the datatable.

I tried to remove the example_wrapper by using a simple .html() method with a table with id="example", but i fall back in the problem I had.

I'm near the solution, but don't find it !

Any help is welcome.

bastien

Hi again,

A new try : i delete the previous function, retry to put bDestroy at the init of my datatable... And it's nearly working !

the problem : at the init, everything is perfect. When i click on a tab, the width of the tab changes (smaller) and there is like a big margin at left. I click again to change the tab, it seems to work, but not exactly, cause the width a bit smaller than the first time. After that, nothin change, and it works.

Any idea what's happened ?

thanks !

bastien

Finally,

I just add the following line : $("#example").css('width', '960px');

So i forced the width of the table. It works. It's not nice but it works...

I am still open to a better reply and to use datatable plugin in the right way, not with this kind of trick.

And thanks for the great work on this plugin !

Cheers
Bastien

bastien

Hi,

New day, new solution, the good one I think. After reading lots of posts, the best solution was to use fnAddRow and fnClear method from the API. Everything is working fine. I just keep the same object and just put the new data in it when I change the tabs.

[code]
var oTable = null;
var display_data = function ( state, datas ) {
// Generate the array of data formatted for datatable plugin
var datas_for_table = generate_array_for_datatable(datas);

if(oTable != null) {
oTable.fnClearTable();
oTable.fnAddData(datas_for_table);
}
else {
oTable = $('#example').dataTable( {
"bDestroy": true,
"aaData": datas_for_table,
"aoColumns": [
{ "sTitle": "Titre" },
{ "sTitle": "Client" },
{ "sTitle": "Date","sClass": "deadline" }
]
});

// Allow to resize manually the width of the columns
$("#example").colResizable();
}
[/code]

It works pretty well. No more worries with css or resize plugin. Still don't understand how is working the datatable object in memory (with destroy attribute at true) but no more matters...

Hope it can be useful to others with same problem.