Destroy and Recreate Troubles!!!

Sash

Hi guys,

I must apologies this is my third post in regards to the same thing. I am just absolutely baffled and I really don't know how to approach this. I am seeing all kinds of weird outcomes when attempting to destroy and re-create the table.

I will just clarify again what I am doing.

I am basically loading datatable with some dynamic data from the server. each time i request a report - the JSON object will come back in different format. that is - aoColumns first time might be { "ID", "Name", "Surname" } but other times it might be { "ID", "SomeOtherField","SomeMoreFields","AndMoreFields" } with respective aaData (I have written my own parser in the back-end).

Any how - I am finding it REALLY hard to destroy the current table and fully recreate it with the new data so it will look completely different from the last time i loaded it. I have used bDestroy = true, I have used oTable.fnDestroy().

I have practically resulted in having to fully refresh the page to re-load the data. Any suggestions would help.

I've tried this...
[code]
$("#datatable").html("").removeAttributes().append("").append("").append(""); [/code]

even this. ..
[code]if(oTable != null) bDestroy = true .... [/code]

then in my var settings { "bDestroy" : bDestroy, ....... }


Here is the code in it's simplest form as I fetch the data in JSON form from the server.

[code]
function SetupTable(json) {
var settings = {
"bJQueryUI": true,
"bProcessing": true,
"bRetrieve": true,
"bSortable": false,
"bDestroy": bDestroy,
"bPaginate": false,
"sDom": '<"top"T<"clear">rt<"clear">>',
"oTableTools": {
"sSwfPath": "/Scripts/datatables/media/swf/copy_cvs_xls_pdf.swf",
"sRowSelect": "single"
},
"sPaginationType": "full_numbers",
"bScrollCollapse": true,
"bScrollAutoCss": false,
"oColVis": {
"buttonText": " ",
"bRestore": true,
"sAlign": "left"
},
"aaData": json.aaData,
"aoColumns": json.aoColumns
}
oTable = $("#datatable").dataTable(settings);
}
[/code]

allan

In what way does this not work? It would be very useful if you could link us to an example please. You could try:

[code]
$("#datatable").dataTable().fnDestroy();
$("#datatable").dataTable(settings);
[/code]
I guess... but that should be basically the same thing. Also make sure you are using the latest version of DataTables.

Allan

Vacciph

@Sach, i have same scenario in one of my apps where i don't exactly know the column names and column structure[colspan, rowspan] to be populated next, and i used fnDestroy() to dispose off the table on new AJAX request and i initialized it again on AJAX request completion and it works fine. Please see the following code.

On AJAX start:
[code]
function DestroyDataTable()
{
oTable.fnDestroy();
}
[/code]
On AJAX stop:
[code]
function ApplyDataTable(number)
{
oTable = $("#TblKpi").dataTable({
"bPaginate": false,
"bFilter": false,
"aoColumnDefs": [{"sType": "numeric-comma", "aTargets": ["_all"]}]
}
[/code]

Sash

allan, Vacciph Thank you for the quick response.

What you have suggested is exactly what I have tried. Here are a couple of snippets of my code.

1. Without going into too much detail, I have an onclick event on a button:
[code]
.one('click', function () {
setupTable();
getSLAReport($(this).data("object"));
return false;
});
[/code]

2. As you can see in the above code as I click the button, I set up my table. In the setupTable function I have:

[code]
function setupTable() {
if (oTable != null) {
oTable.fnDestroy();
//bDestroy = true; // trying out with bDestroy
}
}
[/code]

3. In my getSlaReport i pass in an object which I have created prior to the button click which is irrelevant - it holds the report data such as ID, Type, Name etc... anyhow .. continuing... this is my code where I fetch the SLA Report from the server:

[code]
function getSLAReport(objDef) {
var xhr = $.post('/Services/Reporting.asmx/GetSLAReportEntries', { reportId: objDef.SlaID }, function (response) {

var json = $.parseJSON(response.text);

var settings = {
"bJQueryUI": true,
"bProcessing": true,
"bRetrieve": true,
"bSortable": false,
//"bDestroy": true,
"bPaginate": false,
"sDom": '<"top"T<"clear">rt<"clear">>',
"oTableTools": {
"sSwfPath": "/Scripts/datatables/media/swf/copy_cvs_xls_pdf.swf",
"sRowSelect": "single"
},
"sPaginationType": "full_numbers",
"bScrollCollapse": true,
"bScrollAutoCss": false,
"oColVis": {
"buttonText": " ",
"bRestore": true,
"sAlign": "left"
},
"aaData": json.aaData, // Data...
"aoColumns": json.aoColumns // Fresh columns
}

oTable = $("#datatable").dataTable(settings);

// Post init setup functions...
oTable.fnSetColumnVis(0, false);
oTable.fnSetColumnVis(1, false);
disableColumnSort();
setupColumns(objDef);
recalculateSla();
enableButtons();

return false;

}).error(function (resp) {
popupDialog("Error", resp.responseText);
});
}
[/code]

To me this seems like a straight forward process. I am destroying the table before I call the getSlaReports() function if oTable != null ... followed by an ajax call to the server with fresh data coming through.

NOTE: The whole process works the when I load data for the first time - table displays beautifully, post init sets up everything and it just works flawlessly.

The errors which i am getting are:

1. Error: 'cell' is null or not an object (it's coming from jQuery)

The previous table is not destroyed and the new table recreates itself on top of the other but the rows look a little "mangled up".

I've had issues with the below line in my settings array, which was continuously looping through errors and making the browser really slow, so I have commented it out, giving me only the above error.

[code]
"oTableTools": {
"sSwfPath": "/Scripts/datatables/media/swf/copy_cvs_xls_pdf.swf",
"sRowSelect": "single"
},
[/code]

I don't know fellas - I am just flabbergasted by this ... I've even resorted to simply redirecting on click and refreshing the page but with additional query parameters eg. www.page.com/Reports.aspx?SlaID=1 - and refreshing that way - which I really don't prefer.

What do you think?

allan

If you could link us to the example that would be very instructive. However, I wonder if what might be happening is that when you destroy the table it is putting all the information back into the DOM from the table (which is what the destroy function does), but in this case you don't really want that, since you are fully defining the table from the JSON source. So I wonder if you add this just after you call fnDestroy, it would do it:

[code]
$("#datatable").empty();
[/code]
Allan

Sash

Hey Allan,

Thank you very much for your suggestion. That seem to have fixed the issue.

I was actually doing what you have suggested, but I was doing it before the fnDestroy().

Although, I needed to remove the below settings - for some reason it kept on crashing IE (not so much crashing but slowing it down as it was continuously looping with errors). I am not sure this is something which you will be looking at but it seems that when you destroy a datatable and try to re-create it again with the below settings - it throws errors.

While we're on that note - how could I re-apply the below once the table is initialized? fnSettings().oTableTools ? or?
[code]
"oTableTools": {
"sSwfPath": "/Scripts/datatables/media/swf/copy_cvs_xls_pdf.swf",
"sRowSelect": "single"
},
[/code]

allan

TableTools doesn't have a destroy function at the moment, which is something on the to-do list which I've not got around to yet... So what you need to do is do it manually. What is the error you are getting? I would imagine that you will need to remove the TableTools element from the DOM (probably before fnDestroy).

Allan