Datatables: Uncaught TypeError: Cannot read property 'parentNode' of undefined

Question

I'm getting two errors in my console upon viewing a webpage. Datatables is being used, and I am quite sure (as the errors state) that the issue is related to Datatables. The problem here is that I did not write this code, I am merely now trying to fix issues in the code. The odd thing is that this section of the code should have been working before, as I can visibly see it working on the live version. Am I correct in what I believe to be the error? If so, what is the best way to go about debugging this, when the code is not made by me, and the code and data is in large quantities?

DataTables warning: Unexpected number of TD elements. Expected 2040 and got 1981. DataTables does not support rowspan / colspan in the table body, and there must be one cell for each row/column combination. jquery.dataTables.js:5840

Uncaught TypeError: Cannot read property 'parentNode' of undefined. jquery.dataTables.js:2843

Solution 1

Do you have a URL that you can post so that we can take a look?

Cannot read propertyparentNodeof undefined is a javascript error that happens because you are trying to get the parentNode of something that doesn't exist.

The other error seems quite obvious? The number of TD elements in a TR is not in line with the rest of the table. Look at the HTML and check if the number of TD & TH elements in the THEAD, TFOOT and TBODY are all the same count. "DataTables does not support rowspan / colspan in the table body"

Please post a URL or HTML/JS snippet of the table, preferrably on http://www.jsfiddle.net

Solution 2

Unrelated to this specific case, but might come in useful for anyone else searching for this issue.

I had the same error and it turned out to be caused by specifying a sort column that didn't exist. I specified column 11, but the table only had 10 columns.

Solution 3

destroying the table w/o checking whether it is a data table or not was causing the problem for me so it got resolved by adding the below check

var table = $('#tableName')
    if (!$.fn.DataTable.isDataTable('#tableName')) {
       return;
    }
    else {
        var table = $('#tableName').DataTable();
        table.destroy();
    }

Solution 4

I had the same error but different solution resolved it.
I had already set the property destroy : true while initializing the datatable. This helps in re-initializing the table.
Issue :
In datatable you have to provide a property 'columns': columnArray, while initializing. It looks something like:

$('#example').dataTable( {
  "ajaxSource": "sources/objects.txt",
  "columns": [
    { "data": "engine" },
    { "data": "browser" },
    { "data": "platform" },
    { "data": "version" },
    { "data": "grade" }
  ],
  destroy: true
} );

This columnArray has to be populated based on ajax data. I was populating this for every ajax call, thus bloating up the array with multiple entries for the same columns. I fixed it by re-initializing the array to [].

View more solutions

Comments

[ComputerLocus]

I can't give a URL to the actual site as it is a private website, and it would be hard to show you anything via jsfiddle as it is using PHP as well.

[Richard]

Your output is HTML.. Copy that into jsfiddle. The PHP code here is not important. Just copy the HTML of the table into JS fiddle and the javascript code that you use to build the table.

[ComputerLocus]

But, the table contains sensitive data. Would only trying to give part of it in jsfiddle work, or do you need the whole thing?

[Richard]

Can you not take out the sensitive data? Make the table only 10 rows long, or 5. Doesn't have to be big. Just need to see the structure. And your javascript that initializes the table

[ComputerLocus]

Here is the jsfiddle for the html. I have to still do some exploring to find exactly which part of the Javascript is used: jsfiddle.net/SSR2u

[Richard]

You have a table in your table... That's not going to work with datatables. And also an iFrame. What are you trying to do? It looks like it has something to do with your TinyMCE texteditor. Take that out first.

[ComputerLocus]

It works on another page though? The table within it is shown when you click a little "+" icon. It is suppose to expand the data you see. It works on another page. Also I updated with some Javascript, though I do not know how to include the Datatables and jQuery js files in jsfiddle without copy and pasting the whole code in. jsfiddle.net/SSR2u/1

[ComputerLocus]

Look at this sample picture for an example of what it kind of should look like: i.imgur.com/vHwZ3ol.png . The columns are a little different, and there also will be a TinyMCE editor when you expand the box, but other than those points it is essentially suppose to be the same.

[Richard]

It is very messy - For starters you are concatenating a JS string with dots, instead of pluses: sOut += '<tr><td width="25%">'.termIDToName($terms[0]).' Comments</td><td width="25%">'.termIDToName($terms[1]).' Comments</td><td width="25%">'.termIDToName($terms[2]).' Comments</td><td width="25%">'.termIDToName($terms[3]).' Comments</td></tr>';. That's breaking for me already.

[ComputerLocus]

Sorry, I didn't mention it, but this Javascript is actually echo'ed from PHP and therefore some of this Javascript data is filled with data from PHP variables. You are seeing things like that, as that is when PHP is used. Previously every quotation mark was being escaped, but I removed those to hopefully make readability slightly better.

[Richard]

That doesn't make sense.. If this is the HTML output you should not see any PHP..

[ComputerLocus]

Sorry, here is the HTML output version, though again I had to censor a few things like usernames jsfiddle.net/SSR2u/3

[Richard]

Sorry, this is really too messy. Too much weird stuff in your HTML. You've got several tables in your table, iFrame's. I can't make anything of this. I have quite a bit of DataTables experience, but can't help you here..

[ComputerLocus]

Do you have any suspicion as to what the error may be relating to?

[Richard]

Yep; my suspicion is your HTML. Try stripping it down and make it work with a simpler version. Then start adding things back and see if it works. I'm pretty sure it's because you have tables inside your table :-)

[ComputerLocus]

No, not really. Instead I switched to use the code that was being used on the live server, instead of the development code and it seems to work. Seems some data was missing.

[Ryan Shillington]

I'm also getting this error when calling $(myTable).DataTable().destroy(true). I don't understand your solution. What array are you re-initializing?

[YetAnotherBot]

Been a long time since I posted this. It was something related to re0initializing my datatable. destroy helps you do that.

[Ryan Shillington]

For the next person, I solved this problem by not calling .destroy() but instead, I added the destroy: true flag to the initialization like @Aditya Gupta posted above. That seemed to work. My columns are dynamic and I didn't need to initialize them like you did here.

[Wojna]

it solved my case i was trying to sort on column index -1 which obviously didnt exist