使用destroy（）时出现数据表错误：无法在“节点”上执行“insertBefore”：要插入新节点的节点

Question

我如何使用 DataTables：

1. 从数据库中获取数据。
2. 使用 Underscore.js 模板将数据转换为行对象。
3. 用行填充我的表的<tbody>。
4. 然后我在我拥有的表上初始化数据表。

问题是当我尝试向表中添加更多行时，我没有使用 API，所以我只是将行直接添加到 <tbody> 并且我希望 DataTables ReInit 它自己使用新的<tbody>。

我正在尝试Destroy 表，但发生的情况是我收到此错误：

未捕获的 DOMException：无法在“节点”上执行“insertBefore”： 要插入新节点的节点不是 这个节点。(…)

我创建了一个 Demo 来重现我正在尝试使用 Datatables 执行的操作，但它不会重现错误...

这是我发现的关于相同错误的问题：
https://datatables.net/forums/discussion/28081/how-to-update-table-when-dom-changes-destroy-init-crash

Answer 1

无需销毁和初始化，使用api重绘表格即可

function Repopulate() {
    //...
    //...
    //...
    //init() //remove this line and add the one below
    $("#changeLogTable").DataTables().draw(); 
} 

Answer 2

您只需在数据表配置中添加 "retrieve": true, 选项即可。

function init(){
    ruleChangeLogTable = $('#changeLogTable').DataTable({
      //I use destroy because I want to recreate the table with new data.
            "bLengthChange": false,
            "bPaginate": false,
             "retrieve": true,              // this option is added
            "bInfo": false,
            "autoWidth": false,
            "order": [[0, "desc"]],
            "dom": '<"#searchInput"f>',
            "oLanguage": { "sSearch": "" },
            "columns": [ 
            null,
                null,
                null,
                null, 
                 null
            ]
        });
    }

https://datatables.net/reference/option/retrieve 更多详情请参考这里

希望对你有帮助