25

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!

4
  • 2
    please, include the full code with the else if that you mention.
    – Kaii
    Jun 26, 2012 at 20:16
  • its a lot of code because there are datatables and things being passed over and changed. A lot of the code that is in there should really be on the server page, but i havent had a chance to move it out yet, but all of the classes setting tr and td css are the same in both the if and the else if
    – ph_leh
    Jun 26, 2012 at 20:21
  • can you put it on jsfiddle or github gists so people can look at it?
    – bokonic
    Jun 26, 2012 at 20:29
  • i tried that initially and it didnt turn out right. possibly because of all the java code but this is the link i had: my jsfiddle
    – ph_leh
    Jun 26, 2012 at 20:34

7 Answers 7

51

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.

1
  • This makes my problem, solve as I don't know about this previously but now I found to know that there must be a match between columns and row data for data tables. Interesting this to know.
    – PHP CODER
    Mar 22, 2019 at 5:03
11

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] }]
});
1
  • That was spot on! :) Thanks
    – Veeru
    Jun 4, 2013 at 3:53
10

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.

0
2

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

1
  • +1 for look at html mark-up. I had the same error because </tr> was outside a foreach loop (and thus only the last row was property closed)
    – Flion
    Mar 15, 2013 at 13:49
2

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: []
});
1
  • 1
    This comment saved my day. We had to hide some columns in a gridview that was created years back. After we removed the unwanted columns, this error was bugging us for days. After correcting the aTargets value, the error got fixed.
    – entryton
    Oct 21, 2020 at 11:11
0

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
}
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.