DataTables: Cannot read property style of undefined

JavascriptJquerynode.jsDatatables

Javascript Problem Overview

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..

Javascript Solutions

Solution 1 - Javascript

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)

Solution 2 - Javascript

POSSIBLE CAUSES
  • Number of th elements in the table header or footer differs from number of columns in the table body or defined using columns 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 the columns option.
  • If you use 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.
  • If you use 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.

Solution 3 - Javascript

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
        ]
    });

Solution 4 - Javascript

most of the time it happens when the table header count and data cel count is not matched

Solution 5 - Javascript

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.

Solution 6 - Javascript

For me the data columns {data: columnName} had more columns than Table Heads <th>Column Name</th>

Solution 7 - Javascript

Make sure that in your input data, response[i] and response[i][j], are not undefined/null.

If so, replace them with "".

Solution 8 - Javascript

It can also happen when drawing a new (other) table. I solved this by first removing the previous table:

$("#prod_tabel_ph").remove();

Solution 9 - Javascript

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">
  <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>


                TASKLISTGRID = $("#TASK_LIST_GRID").DataTable({
                    data : response,
                    columns : columns.AdoptionTaskInfo.columns,
                    paging: true
                });
                
                //Note: columns : columns.AdoptionTaskInfo.columns has at least a column not definded in the <thead>

Note: columns : columns.AdoptionTaskInfo.columns has at least a column not defined in the table head

Solution 10 - Javascript

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)

Solution 11 - Javascript

The answers here put me on the right path, but none gave me the full answer I needed. I was using destroy: true as an option, but on a second iteration of a DataTable, I kept getting the error in the original question.

Instead, I had to call the destroy() method directly, and clear out the child entities of the HTML to force DataTables to properly repaint the DataTable on each iteration without a conflict between the <th> headers and the ones being passed in columns: like this:

if ($.fn.DataTable.isDataTable('#results_table')) {
    $('#results_table').DataTable().destroy();
}
$('#results_table thead').empty();
$('#results_table tbody').empty();

$('#results_table').DataTable({
    data: data,
    columns: columns,
    ...etc...
});

Solution 12 - Javascript

In my case, I was updating the server-sided datatable twice and it gives me this error. Hope it helps someone.

Solution 13 - Javascript

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.

Solution 14 - Javascript

I was having the same problem with Jquery Datatable. The number of table head ( tags) in table heading was same with tags in table body. I resolved this issue by removing one of the Datatable attribute called "scrollX": true". Then everything works fine for me.

Solution 15 - Javascript

"aoColumns": [{
               "bVisible": false, 
               "render": function ( data, type, full, meta ) 
                {},
             ]

I solved this issue by setting bVisible as false. You can also set condition on bVisible as "bVisible": var1, where var1 can be true or false;

Solution 16 - Javascript

I solved this issue by setting bVisible as false. You can also set condition on bVisible as "bVisible": var1, where var1 can be true or false.

Categories
Recommended Javascript Solutions
Recommended Jquery Solutions
Recommended node.js Solutions

Previous Solution:

How I can print to stderr in C?

CPrintfStderr

Next Solution:

What TypeScript version is Visual Studio Code using? How to update it?

TypescriptVisual Studio-Code

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRookieView Question on Stackoverflow
Solution 1 - JavascriptehrencronaView Answer on Stackoverflow
Solution 2 - JavascriptGyrocode.comView Answer on Stackoverflow
Solution 3 - JavascriptBahadir TasdemirView Answer on Stackoverflow
Solution 4 - JavascriptShiwantha VirajView Answer on Stackoverflow
Solution 5 - JavascriptJustLearningView Answer on Stackoverflow
Solution 6 - JavascriptSagarKapasi099View Answer on Stackoverflow
Solution 7 - JavascriptDavid I. SamudioView Answer on Stackoverflow
Solution 8 - JavascriptGuestView Answer on Stackoverflow
Solution 9 - JavascriptStanley Okpala NwosaView Answer on Stackoverflow
Solution 10 - JavascriptTomás GaeteView Answer on Stackoverflow
Solution 11 - JavascriptFlipperPAView Answer on Stackoverflow
Solution 12 - JavascriptTaianView Answer on Stackoverflow
Solution 13 - JavascriptSayed Aslam ShahView Answer on Stackoverflow
Solution 14 - JavascriptAwais AnwarView Answer on Stackoverflow
Solution 15 - Javascriptashish29494View Answer on Stackoverflow
Solution 16 - Javascriptrelate13View Answer on Stackoverflow