DataTables在动态HTML数据上过早初始化/执行

Question

我有一个基于数组创建HTML表的函数。完成HTML表的创建后，我想调用jQuery DataTables来呈现表。

然而，这不起作用。每当我这样做时，我都会得到“表格中没有数据”行，并显示我的表格数据。但是，只要我点击它的过滤器，所有<td> HTML数据都会消失。我检查了我的表的HTML，它是正确定义的，具有所有必需的标记，并与我的函数创建的匹配。

从我读过的内容来看，问题在于DataTables函数过早发生。我通过使用setTimeout函数确认了这一点 - 它完美地创建了表并且没有错误。但是，此解决方案不可扩展，并且一旦数据扩展就会导致同样的问题。

我尝试使用回调来修复此问题（DataTables仍然过早发布，我使用renderTable(function(){$('#divtable').DataTable();}）和承诺（它仍然过早发生，我尝试使用function.done()...）。如何仅在HTML表格div完成更新时调用渲染函数？

这是我的（缩短的）代码：

HTML表格渲染：

function renderTable() {
    for (var i = 0; i < array.length; i++) {
        var tableRow = '';
        tableRow += '<tr><td class="ID">' + array[i].id + '</td><td>' + array[i].date + '</td><td>' + array[i].total + '</td><td><input type=button class="editValues" value="Edit Values" /></td></tr>';
        $("#divtable > tbody").append(tableRow);
}

jQuery的：

$(document).ready(function() {
    renderTable();
    $('#divtable').DataTable();
}