Issue adding a Column
Issue adding a Column
hobbit36
Posts: 8Questions: 2Answers: 0
I have a DataTable which has columns that need to be changed dynamically based on the choice of the user. At first when someone accesses the page I just have an empty generic table which contains some of the overlapping columns between choices (as the user hasn't had a chance to specify the type of data). Here's the details of how the original table looks:
Table = $('#mydata').DataTable({
data:[],
columns: [
{ "title": "col1", data: 'col1' },
{ "title": "col2" , data: 'col2'},
{ "title": "col3" , data: 'col3'},
{ "title": "col4" , data: 'col4'},
{ "title": "col5" , data: 'col5'},
{ "title": "col6" , data: 'col6'},
{ "title": col7" , data: 'col7'},
{ "title": "col8" , data: 'col8'}
],
info: false,
"searching": false,
"pageLength": 50,
"scrollX": true,
buttons: [
'csv'
],
} );
When a choice is made. An Ajax call is made, as shown below:
$("#loadButton").click(function(){
$.ajax({
url: '/foo/bar,
type : "GET",
data: { }, //Data I send over to the server
dataType: 'json',
success: function (response) {
Table.destroy(); //First I destroy the table
//Reinstantiate the variable
Table = $('#mydata').DataTable({
data: response.data,
columns: [
{ "title": "col1", data: 'col1' },
{ "title": "col2" , data: 'col2'},
{ "title": "col3" , data: 'col3'},
{ "title": "col4" , data: 'col4'},
{ "title": "col5" , data: 'col5'},
{ "title": "col6" , data: 'col6'},
{ "title": col7" , data: 'col7'},
{ "title": "col8" , data: 'col8'},
{ "title": "col9" , data: 'col9'},
],
info: false,
"searching": false,
"pageLength": 50,
"scrollX": true,
buttons: [
'csv'
],
} );
}
});
});
The problem is that when I make the call, the table isn't loading. Here's what's coming up:
Uncaught TypeError: Cannot read property 'style' of undefined
at _fnCalculateColumnWidths (jquery.dataTables.js:5603)
at _fnInitialise (jquery.dataTables.js:4726)
at loadedInit (jquery.dataTables.js:1320)
at HTMLTableElement.<anonymous> (jquery.dataTables.js:1332)
at Function.each (jquery-3.2.1.min.js:2)
at r.fn.init.each (jquery-3.2.1.min.js:2)
at r.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)
at r.fn.init.$.fn.DataTable (jquery.dataTables.js:15172)
at Object.success (goalies.js:41)
at i (jquery-3.2.1.min.js:2)
Looks like it's this here that's causing the issue:
headerCells[i].style.width = column.sWidthOrig !== null && column.sWidthOrig !== '' ?
So it has to be related to the fact that I'm adding a column because if I get rid of the extra one at the end (and just do nothing or maybe change around how the other eight are) it works perfectly fine. But I'm kind of confused as to how the previous table's column #'s (which was destroyed) matters to the new one.
Any help here would be appreciated.
Also here's my HTML code for the table:
<div class="container" id="example_table">
<table class="table table-striped table-bordered" cellspacing="0" width="100%" id="mydata">
<thead class="text-primary"></thead>
</table>
</div>
This question has an accepted answers - jump to answer
Answers
This thread should answer your questions:
https://datatables.net/forums/discussion/comment/115207/#Comment_115207
Kevin
You could also try adding $("thead", table).remove(); after destroy and that might fix it.
@Dalex73
Thanks but it doesn't seem to work.
@kthorngren
I'm sorry Kevin, but are you saying I should create all the columns initially and then hide/unhide as I go along?
Sorry missed that you are using destroy(). Using my phone at the moment. I'm not sure why your code is not working.
Kevin
UPDATE:
Ok, so I found that putting
in the new DataTable constructor gets rid of the error and loads all of the rows of data. The problem now is that while it loads the data for all the columns, it's now missing the column name in the the column header.
So, for example, if my original table has 8 columns and my new data has 9. Then when I load the new data, the header only has 8 different column names (which my original generic table has) but below it there are 9 different columns of data. So it's just the column name not showing up
Maybe try this:
$('#mydata').DataTable().destroy();
Typically you don't want to disable autoWidth.
Kevin
@kthorngren
Yeah, it doesn't seem to help. That causes the same error to come back again.
I posted a simple test case here (it's a little rough but it gets my problem across)
https://jsfiddle.net/pLpkhb7d/1/
I strongly suspect that your problem is that you do not empty out all the rows in tbody at some point. I get rid of the error this way...
@bindrid
Yep, that was it. Thanks!