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)
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.
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
]
});
most of the time it happens when the table header count and data cel count is not matched
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.
For me the data columns {data: columnName}
had more columns
than Table Heads <th>Column Name</th>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With