destroy issue

destroy issue

pfistapfista Posts: 5Questions: 0Answers: 0
edited April 2014 in DataTables 1.10
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]

Replies

This discussion has been closed.