I am getting this error with the following:
jquery.dataTables.js:4089 Uncaught TypeError: Cannot read property 'style' of undefined(…)
_fnCalculateColumnWidths @ jquery.dataTables.js:4089
_fnInitialise @ jquery.dataTables.js:3216
(anonymous function) @ jquery.dataTables.js:6457
each @ jquery-2.0.2.min.js:4
each @ jquery-2.0.2.min.js:4
DataTable @ jquery.dataTables.js:5993
$.fn.DataTable @ jquery.dataTables.js:14595
(anonymous function) @ VM3329:1
(anonymous function) @ VM3156:180
l @ jquery-2.0.2.min.js:4
fireWith @ jquery-2.0.2.min.js:4
k @ jquery-2.0.2.min.js:6
(anonymous function) @ jquery-2.0.2.min.js:6
The line above referring to (anonymous function) @ VM3156:180 is:
TASKLISTGRID = $("#TASK_LIST_GRID").DataTable({
data : response,
columns : columns.AdoptionTaskInfo.columns,
paging: true
});
So I am guessing this is where it is failing.
The HTML ID element exist:
<table id="TASK_LIST_GRID" class="table table-striped table-bordered table-hover dataTable no-footer" width="100%" role="grid" aria-describedby="TASK_LIST_GRID_info">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Solution</th>
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Status</th>
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Category</th>
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Type</th>
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Due Date</th>
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Create Date</th>
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Owner</th>
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Comments</th>
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Mnemonic</th>
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Domain</th>
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Approve</th>
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Dismiss</th>
</tr>
</thead>
<tbody></tbody>
</table>
Also, the columns.AdoptionTaskInfo.columns & response object arrays exist. Not sure how to debug what's wrong.. Any suggestions will be helpful..
This question is related to
javascript
jquery
node.js
datatables
Funnily i was getting the following error for having one th-/th pair too many and still google directed me here. I'll leave it written down so people can find it.
jquery.dataTables.min.js:27 Uncaught TypeError: Cannot read property 'className' of undefined
at ua (jquery.dataTables.min.js:27)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:127)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at n.fn.init.j (jquery.dataTables.min.js:116)
at HTMLDocument.<anonymous> (history:619)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)
In my case, I was updating the server-sided datatable twice and it gives me this error. Hope it helps someone.
The problem is that the number of <th> tags need to match the number of columns in the configuration (the array with the key "columns"). If there are fewer <th> tags than columns specified, you get this slightly cryptical error message.
(the correct answer is already present as a comment but I'm repeating it as an answer so it's easier to find - I didn't see the comments)
most of the time it happens when the table header count and data cel count is not matched
The solution is pretty simple.
<table id="TASK_LIST_GRID" class="table table-striped table-bordered table-hover dataTable no-footer" width="100%" role="grid" aria-describedby="TASK_LIST_GRID_info">_x000D_
<thead>_x000D_
<tr role="row">_x000D_
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Solution</th>_x000D_
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Status</th>_x000D_
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Category</th>_x000D_
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Type</th>_x000D_
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Due Date</th>_x000D_
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Create Date</th>_x000D_
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Owner</th>_x000D_
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Comments</th>_x000D_
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Mnemonic</th>_x000D_
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Domain</th>_x000D_
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Approve</th>_x000D_
<th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Dismiss</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody></tbody>_x000D_
</table>
_x000D_
TASKLISTGRID = $("#TASK_LIST_GRID").DataTable({_x000D_
data : response,_x000D_
columns : columns.AdoptionTaskInfo.columns,_x000D_
paging: true_x000D_
});_x000D_
_x000D_
//Note: columns : columns.AdoptionTaskInfo.columns has at least a column not definded in the <thead>
_x000D_
Note: columns : columns.AdoptionTaskInfo.columns has at least a column not defined in the table head
I had this issue when i set colspan
in table header. So my table was:
<thead>
<tr>
<th colspan="2">Expenses</th>
<th colspan="2">Income</th>
<th>Profit/Loss</th>
</tr>
</thead>
Then once i change it to:
<thead>
<tr>
<th>Expenses</th>
<th></th>
<th>Income</th>
<th></th>
<th>Profit/Loss</th>
</tr>
</thead>
Everything worked just fine.
You said any suggestions wold be helpful, so currently I resolved my DataTables "cannot read property 'style' of undefined" problem but my problem was basically using wrong indexes at data table initiation phase's columnDefs
section. I got 9 columns and the indexes are 0, 1, 2, .. , 8 but I was using indexes for 9 and 10 so after fixing the wrong index issue the fault has disappeared. I hope this helps.
In short, you got to watch your columns amount and indexes if consistent everywhere.
Buggy Code:
jQuery('#table').DataTable({
"ajax": {
url: "something_url",
type: 'POST'
},
"processing": true,
"serverSide": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"columns": [
{ "data": "cl1" },
{ "data": "cl2" },
{ "data": "cl3" },
{ "data": "cl4" },
{ "data": "cl5" },
{ "data": "cl6" },
{ "data": "cl7" },
{ "data": "cl8" },
{ "data": "cl9" }
],
columnDefs: [
{ orderable: false, targets: [ 7, 9, 10 ] } //This part was wrong
]
});
Fixed Code:
jQuery('#table').DataTable({
"ajax": {
url: "something_url",
type: 'POST'
},
"processing": true,
"serverSide": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"columns": [
{ "data": "cl1" },
{ "data": "cl2" },
{ "data": "cl3" },
{ "data": "cl4" },
{ "data": "cl5" },
{ "data": "cl6" },
{ "data": "cl7" },
{ "data": "cl8" },
{ "data": "cl9" }
],
columnDefs: [
{ orderable: false, targets: [ 5, 7, 8 ] } //This part is ok now
]
});
th
elements in the table header or footer differs from number of columns in the table body or defined using columns
option.th
element in the table header.columnDefs.targets
option.th
elements in the table header or footer matches number of columns defined in the columns
option.colspan
attribute in the table header, make sure you have at least two header rows and one unique th
element for each column. See Complex header for more information.columnDefs.targets
option, make sure that zero-based column index refers to existing columns.See jQuery DataTables: Common JavaScript console errors - TypeError: Cannot read property ‘style’ of undefined for more information.
It can also happen when drawing a new (other) table. I solved this by first removing the previous table:
$("#prod_tabel_ph").remove();
Make sure that in your input data, response[i]
and response[i][j]
, are not undefined
/null
.
If so, replace them with "".
I resolved this error, by replacing the src attribute with https://code.jquery.com/jquery-3.5.1.min.js, the problem is caused by the slim version of JQuery.
Source: Stackoverflow.com