使用 JavaScript 将 dataTable 添加到 HTML 表：无法读取 null 的属性“parentNode”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30265226/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding dataTable to HTML table with JavaScript: Cannot read property 'parentNode' of null
提问by webminer07
I am trying to make the table that I am creating on the fly with JavaScriptinto 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 JavaScripterror: "Cannot read property 'parentNode' of null" in the console.
我正在尝试将我正在即时创建的表格制作JavaScript成.dataTable. 我将我的代码与我的同事进行了比较，它们几乎相同。我已经进行了必要的更改，但我一直JavaScript在控制台中收到错误消息：“无法读取 null 的属性‘parentNode’”。
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.
所有代码都完美地执行。新表正在浏览器中显示，但是一旦它尝试运行该行，$('#data').dataTable({"paging": false});它就会给我错误。
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);
});
}
回答by Alon Eitan
I think you must include a valid theadelement in your table
我认为您必须thead在表格中包含一个有效元素
回答by ParPar
I had this problem when using DataTables.jsdirectory and I solved it by empty the table before any refresh or refill:
我在使用DataTables.js目录时遇到了这个问题，我通过在任何刷新或重新填充之前清空表来解决它：
$('#data').empty();
回答by micahblu
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) :
在将数据行添加到表中之前，我不会将表附加到 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);
Here's a workin jsbin: http://jsbin.com/vacabe/1/
这是 jsbin 的工作：http://jsbin.com/vacabe/1/
回答by Vlad-Florin Glitia
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:
我在这个库中遇到了同样的情况。我将它与 Knockout.JS 一起使用并使其工作，我在 viewModel 的末尾添加了超时：
setTimeout(() => {
// Call the get function at load
GetFiltersData();
}, 0);
This will not affect you page and i tested this with several browsers with success.
这不会影响你的页面，我用几个浏览器成功地测试了这个。
