destroy issue

pfista

I'm trying to destroy an existing table and replace it with all new data (including different columns).

If the first table I load in has a smaller number of columns than the second table, the destroy call seems to work and the table is loaded correctly. If I load the data with more columns first, and then try to destroy it and replace with a table with a smaller number of columns I am getting this error:


[code]
Uncaught TypeError: Cannot read property 'mData' of undefined jquery.dataTables.js:6080
(anonymous function) jquery.dataTables.js:6080
o.extend.each jquery.min.js:2
(anonymous function) jquery.dataTables.js:6077
o.extend.each jquery.min.js:2
o.fn.o.each jquery.min.js:2
DataTable jquery.dataTables.js:5764
$.fn.DataTable jquery.dataTables.js:14040
$.ajax.success data.js:38
j jquery.min.js:2
k.fireWith jquery.min.js:2
x jquery.min.js:4
o.prop.on.c jquery.min.js:4
o.event.dispatch jquery.min.js:3
r.handle
[/code]

Here is my html and js for the table:

[code]










[/code]
[code]
// Generate a datatable from a given API endpoint
function genDataTable(url, table_id) {

var should_destroy = false;
if ( $.fn.dataTable.isDataTable( '#'+table_id)) {
should_destroy = true;
}

$.ajax({
type: "GET",
dataType: "jsonp",
jsonpCallback: "ReLAPI",
url: url,
beforeSend: function() {
$(".loading").show();
},
success: function(data){
// Generate the proper format for datatable columns
// An array of objects where each object is { "data" :
// "column_name" }
var dt_columns = [];
for (var prop in data.columns) {
console.log("data: "+data.columns[prop]);
dt_columns.push({ "data": data.columns[prop] });
}

// Update the column names on the DOM to match the retrieved data
$(".column-header").empty();
for (var i = 0; i < dt_columns.length; i++){
$(".column-header").append("");
}
$(".column-header").children().each(function(index) {
$(this).text(dt_columns[index].data);
});

console.log ('passing to DT: '+ data.result);
// Initialize the data table
$('#'+table_id).DataTable({
"data": data.result,
"columns": dt_columns,
"destroy": should_destroy
});
},
error: function(data, e) {
console.error("failed ajax call");
$(".column-header").html("Unable to load information");

},
complete: function() {
$(".loading").hide();
}
});
}
[/code]

allan

What version of DataTables are you using? If not 1.10 can you try it please? If you could link to a test case, that would be really helpful.

Allan

pfista

I'm using version 1.10.0-beta.2. Unfortunately right now I'm only developing locally so I can't link to a test case right now. If needed I can put one online for you.

allan

It would greatly assist in being able to track down the error. Try also using the nightly : http://datatables.net/download .

Allan

pfista

I tried with the nightly build 1.10.0-beta.3 and the issue remains. I'll try and get back to you with a demo.

pfista

I fixed the issue and have committed a fix https://github.com/DataTables/DataTablesSrc/pull/4

klin

I experienced the "Cannot read property 'mData' of undefined" message when my code sequence below executes. It attempts to reinitialize my _datatable, due to a change in number of columns ...

if (_dataTable) {
   _dataTable.destroy();
}
_dataTable = $('#' + id).DataTable(options);

After reading these postings about using http://api.jquery.com/empty/ ...

• http://datatables.net/forums/discussion/5287/destroy-and-recreate-troubles
• http://datatables.net/forums/discussion/20524/destroy-issue
• https://github.com/DataTables/DataTablesSrc/pull/4

I have successfully corrected my code like so ...

if (_dataTable) {
    _dataTable.destroy();
    $('#' + id).empty();
}
_dataTable = $('#' + id).DataTable(options);

@Allan, I think it would be helpful to developers if you mention this on the pages dealing with destroy ...

• http://datatables.net/reference/api/destroy()
• http://datatables.net/reference/option/destroy
• http://datatables.net/manual/tech-notes/3#destroy

Thanks all!