Adding dataTable to HTML table with JavaScript: Cannot read property 'parentNode' of null

Question

I am trying to make the table that I am creating on the fly with JavaScript into a .dataTable. I have compared my code to my co-workers and it is almost identical. I have made the necessary changes, but I keep getting the JavaScript error: "Cannot read property 'parentNode' of null" in the console.

All of the code is executing perfectly. The new table is being displayed in the browser, but once it tries to run the line $('#data').dataTable({"paging": false}); it gives me the error.

Can anyone see what is causing this? Maybe a scope error, or a parentheses/bracket in wrong spot.

function Load(p1, p2) {

var work= "";

$('#div1').empty();

var tablearea = document.getElementById('div1'),
table = document.createElement('table');
table.id = "data";
table.style.fontSize = "small";
table.width = "100%";

var tbody = document.createElement('tbody');
tbody.id = "dataTB";
table.appendChild(tbody);
tablearea.appendChild(table);

var url = sessionStorage.baseUrl + "XXXXXXXXX";

$.getJSON(url)
    .done(function (data) {

        var results = $.parseJSON(data);

        if (results != null)
        {
            for (i = 0; i < results.length; i++) {
                    work += "<tr><td>" + results.data[i].info + "</td></tr>";
                }
        }

        $('#dataTB').html(work);

        $('#data').dataTable({"paging": false});
    })
    .fail(function (jqXHR, textStatus, err) {
        alert('Error: ' + err);
});
}

I feel like we're not seeing everything . . . where is `table` defined? Where is the error occuring, according to the console (because I don't see any reference to `parentNode` in your code)? — talemyn, May 15 '15 at 17:22
Well I define the table on the fifth line with var tablearea = document.getElementById('div1'), table = document.createElement('table'); table.id = "data"; table.style.fontSize = "small"; table.width = "100%"; but this is a team project made up of tons of files, but the parentNode error seems like a common error not particular to a specific parentNode variable — webminer07, May 15 '15 at 17:26
Well, `parentNode` isn't a variable, it's a property of the JS `Node` object ( https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode ) that represents the parent of a current element node. Based on the error, somewhere in the logic for `dataTable` it is trying to find the `parentNode` of a non-existant element. My bet is that it, you are calling `$('#data').dataTable({"paging": false});` before the `data` table element has finished being added to the DOM, so it can't find it. — talemyn, May 15 '15 at 17:48
I've thought about this, but I've stepped through step by step in the Chrome debugger, and watched the table with id='data' get added. And then subsequently everything after get added to the table. — webminer07, May 15 '15 at 18:01

score 4 · Accepted Answer · answered May 15 '15 at 17:43

4

I think you must include a valid thead element in your table

answered May 15 '15 at 17:43

Alon Eitan

11,997
8
49
58

1

This was essentially it. I had to add **thead/tfoot** and **** for dataTables to actually work properly. Guess it teaches me to not assume what things need, and read the documentation. – webminer07 May 15 '15 at 18:18

score 3 · Answer 2 · answered Nov 30 '16 at 07:25

3

I had this problem when using DataTables.js directory and I solved it by empty the table before any refresh or refill:

$('#data').empty();

answered Nov 30 '16 at 07:25

ParPar

7,355
7
43
56

score 1 · Answer 3 · answered May 15 '15 at 17:44

1

I would not append the table to the DOM until the data rows were added to the table. So I would try something like the following instead (Inside the JSON callback) :

var tbody = document.createElement('tbody');
    tbody.id = "dataTB";
    table.appendChild(tbody);

var tablearea = document.getElementById('div1'),
    table = document.createElement('table');
    table.id = "data";
    table.style.fontSize = "small";
    table.width = "100%";

for (i = 0; i < results.length; i++) {
  $(tbody).append("<tr><td>" + results.data[i].info + "</td></tr>");
}

tablearea.appendChild(table);

Here's a workin jsbin: http://jsbin.com/vacabe/1/

answered May 15 '15 at 17:44

micahblu

4,924
5
27
33

I tried both this and Alon's and neither worked. Also I am getting error "Uncaught TypeError: Cannot read property 'mData' of undefined" – webminer07 May 15 '15 at 17:55
@webminer07 can you post what you have in its entirety in a jsbin? – micahblu May 15 '15 at 18:07

score 0 · Answer 4 · answered May 16 '17 at 16:35

0

I had the same situation with this library. I'm using it with Knockout.JS and to make it work i added at the end of my viewModel a timeout:

setTimeout(() => {

    // Call the get function at load
    GetFiltersData();

}, 0);

This will not affect you page and i tested this with several browsers with success.

answered May 16 '17 at 16:35

Vlad-Florin Glitia

33
7

var table = $("#table").closest("table").DataTable(); table.clear(); this is the latest update that i made to my code and worked even better – Vlad-Florin Glitia Mar 10 '18 at 19:07

Adding dataTable to HTML table with JavaScript: Cannot read property 'parentNode' of null

4 Answers4