使用JavaScript將dataTable添加到HTML表中：無法讀取null的屬性“ parentNode”

Question

我試圖將使用JavaScript創建的表制作成.dataTable 。 我已經將我的代碼與我的同事進行了比較，並且幾乎完全相同。 我進行了必要的更改，但是在控制台中仍然出現JavaScript錯誤：“無法讀取null的'parentNode屬性'”。

所有代碼都完美執行。 新表將顯示在瀏覽器中，但一旦嘗試運行$('#data').dataTable({"paging": false}); 它給了我錯誤。

誰能知道是什么原因造成的？ 可能是示波器錯誤，或者括號/括號位於錯誤的位置。

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);
});
}

Answer 1

我認為您必須在表格中包含有效的thead元素

Answer 2

使用DataTables.js目錄時遇到了這個問題，我通過在刷新或重新填充之前清空表來解決此問題：

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

Answer 3

在將數據行添加到表之前，我不會將表追加到DOM。 所以我會嘗試類似以下內容（在JSON回調內部）：

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);

這是一個可在jsbin中使用的工具： http ://jsbin.com/vacabe/1/

Answer 4

我對這個圖書館也有同樣的看法。 我在Knockout.JS中使用它，並使其工作，我在viewModel的末尾添加了超時：

setTimeout(() => {

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

}, 0);

這不會影響您的頁面，我已成功使用多種瀏覽器對其進行了測試。