Uncaught TypeError: Cannot read property 'className' of undefined

Question

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

Uncaught TypeError: Cannot read property \'className\' of undefined

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

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.

Answer 3

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 4

I got an identical error to the one you're getting now. I once encountered a very similar error using the Chosen library. The problem was (in Chosen's case) that IDs with the [] characters were being used, thus confusing Javascript between css selectors and ids (remember that in CSS we can use [] to specify attributes).

In the case of DataTables, however, I noticed that the DataTables script itself was prepending class = " " before the first element in every tr element within the tbody.

The reason for this was because the HTML output from the php had a logical error. The faulting code:

<?php
for ($currentRow = 0 ; $currentRow <= $query_length; $currentRow++) {
        ?>
        <tr>
        <?php
        list($job_id, $company_id, $job_title, $industry_id, $profession_int, $job_openings, $job_city, $job_salary_start, $job_end_date, $job_start_date, $job_skills, $company_name, $isConfidential, $job_experience_level) = dbRow($query_results, $currentRow);
      echo "<td class = \"detailed-job-row\">" . $job_title . "</td>";
      echo "<td class = \"detailed-job-row\">" . $company_name . "</td>";
      echo "<td class = \"detailed-job-row\">" . $industry_id . "</td>";
      echo "<td class = \"detailed-job-row\">" . $profession_int . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_openings . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_city . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_salary_start . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_end_date . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_start_date . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_skills . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_experience_level . "</td>";
      ?>
        </tr>
        <?php  
     } ?>
    </tbody>
  </table>
<?php
}
?>

There was an error at the bottom of the long, long table, indicating that postgres could not jump to row 208. This told me I needed to stop looping at i - 1, or $currentRow - 1.

Hence the fixed, working code:

<?php
for ($currentRow = 0 ; $currentRow <= $query_length - 1; $currentRow++) {
        ?>
        <tr>
        <?php
        list($job_id, $company_id, $job_title, $industry_id, $profession_int, $job_openings, $job_city, $job_salary_start, $job_end_date, $job_start_date, $job_skills, $company_name, $isConfidential, $job_experience_level) = dbRow($query_results, $currentRow);
      echo "<td class = \"detailed-job-row\">" . $job_title . "</td>";
      echo "<td class = \"detailed-job-row\">" . $company_name . "</td>";
      echo "<td class = \"detailed-job-row\">" . $industry_id . "</td>";
      echo "<td class = \"detailed-job-row\">" . $profession_int . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_openings . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_city . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_salary_start . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_end_date . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_start_date . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_skills . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_experience_level . "</td>";
      ?>
        </tr>
        <?php  
     } ?>
    </tbody>
  </table>
<?php
}
?>

Performing this change allowed DataTables to perform properly.

So although I cannot provide a working solution, I do advise you to look at your html mark-up, as that may be the source of your problem (ex, does your table have a tbody?).

Answer 5

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 6

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