Uncaught TypeError: Cannot read property 'clas

Question

The following error is being thrown in Google Chrome's developers tools:

Uncaught TypeError: Cannot read property 'className' of undefined

The code on which the error is being thrown is:

var oTable = $('#resultstable').dataTable({
                            "bAutoWidth" : true,
                            "iDisplayLength" : 10,
                            "bFilter" : false,
                            "bLengthChange" : false
                        });

resultstable is the id of a table in the html:

<table cellpadding="0" cellspacing="0" border="0" id="resultstable"
                    name="resultstable" class="display datatable">

The weird thing is that after the table tag there is an if statement. The table runs perfectly fine and the CSS shows up correctly when the program is sent into the else if{} section, but it throws the above error and no CSS is applied when it is in the if{} section.

Help please!

Answer 1

Datatables requires that your html table is perfect. I found that I got this error when I did not have an equal amount of <th> and <td>. Make sure you do not have an extra header.

Answer 2

The other answer put me on the right track.

More succinctly, the error was that the table I was creating was incorrect.

My header columns (inside a thead of course), did not match up with my row columns (inside the tbody)

In my situation, I had too many columns inside the header.

Answer 3

In my specific case, I had the aTargets properties set with array indices outside the bounds for my elements.

$('.datatable').dataTable({
  aoColumnDefs: [
    {
      bSortable: false,
      aTargets: [0, 6]
    }
  ],
  aaSorting: []
});

This set that there were 7 td columns, but there were only 6. Changing it to the following corrected it:

$('.datatable').dataTable({
  aoColumnDefs: [
    {
      bSortable: false,
      aTargets: [0, 5]
    }
  ],
  aaSorting: []
});

Answer 4

Another possible cause is if you list more columns in the "aoColumnDefs" attribute than there are "td" elements in the table.

var yourTable = $('#product-search-results-table').dataTable({
    // If you only have three columns in the HTML table, then this line will cause an error, because it lists four columns in "aoColumnDefs".
    "aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1, 2, 3] }]
});

Answer 5

It's throwing this error because when dom first loads you were using before declare.

for this error i had one solution written below:

you can add if condition particular element is not undefined like below

if(document.getElementsByTagName('button') !== undefined){
  // and write your needed code here
}

Answer 6

Encountered similar problem. Root case was that while dataTable was about to take control of the table, our code also tried to manipulate properties of the table a the same time. The error message does not say so, however, once the table was left to be managed solely by dataTable, the problem was gone.