DataTables: Cannot read property style of undefined
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)
POSSIBLE CAUSES
- Number of
th
elements in the table header or footer differs from number of columns in the table body or defined usingcolumns
option. - Attribute colspan is used for
th
element in the table header. - Incorrect column index specified in
columnDefs.targets
option.
SOLUTIONS
- Make sure that number of
th
elements in the table header or footer matches number of columns defined in thecolumns
option. - If you use
colspan
attribute in the table header, make sure you have at least two header rows and one uniqueth
element for each column. See Complex header for more information. - If you use
columnDefs.targets
option, make sure that zero-based column index refers to existing columns.
LINKS
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 ] });