DataTable“表中没有可用数据”，即使它有数据答案

【问题标题】：DataTable "No data available in table" even if it have dataDataTable“表中没有可用数据”，即使它有数据
【发布时间】：2019-09-04 22:50:42
【问题描述】：

我必须用从谷歌电子表格中获得的一些数据填充数据表，我用 HTML 创建表并使用 Jquery 附加行。

问题在于，当数据表加载第一行时，即使下一行有数据，第一行也会显示“表中没有可用数据”。

这是我正在使用的代码的一部分

//该函数创建表行并将其附加到表体

function displayUser() {

for (i = 0; i < userList.length; i++) {
    var $tblRow = $('<tr id="row' + i + '">');

    $tblRow.append('<td id="td' + i + '">' + userList[i][' inv-id']
        + '</td>');
    $tblRow.append('<td id="td' + i + '">' + userList[i]['inv-com-name']
        + '</td>');
    $tblRow.append('<td id="td' + i + '">' + userList[i]['inv-email']
        + '</td>');
    $tblRow.append('<td id="td' + i + '">' + userList[i]['email']
        + '</td>');
    $tblRow.append('<td id="td' + i + '">' + '<button onClick="editarUsuario(' + i + ')" class="btn btn-info btn-xs btn-edit">Edit</button>'
        + '</td>');
    $('#tbody').append($tblRow);
};
}

表格的html代码也是这样的

<table id="dtVerticalScrollExample"
            class="table table-striped table-bordered table-sm text-center table-fixed" cellspacing="0"
            width="100%">
            <thead>
                <tr>
                    <th class="th-sm">ID
                    </th>
                    <th class="th-sm">Company
                    </th>
                    <th class="th-sm">Email
                    </th>
                    <th class="th-sm">User
                    </th>
                    <th class="th-sm">Action
                    </th>
                </tr>
            </thead>
            <tbody id="tbody">

               *here is where the data is appended*

            </tbody>

        </table>

Here is a imagen that shows that the table appears to be empty even when the data was appended by the script, the first row is the message of "No data available in table" and says 0 entries below

我希望数据表能够加载并由从数据库中获取数据的脚本填充。但实际发生的是，第一行说数据表是空的，但在下一行中有数据。

【问题讨论】：

您希望数据库请求立即加载吗？它不会，因为数据库请求是异步的并且需要时间。您能否改为说正在加载，如果没有返回行，则切换到“无可用数据”消息？
我添加了一张图片来显示我遇到的问题，即使在脚本附加数据之后，第一行也会出现“无可用数据”的消息。我以为问题是因为脚本在表加载后运行，但后来我不知道为什么消息一直出现。
你有一个追加 - 这意味着旧行仍然存在。您需要用您创建的内容替换所有内容。
创建表体并将其附加到表中就足够了吗？或者我必须在 jquery 中创建整个数据表？

标签： javascript jquery html ajax

【解决方案1】：

是的，问题是即使在追加之后旧内容仍然存在。

我找到了解决它的方法。为了用我创建的内容替换内容，我必须在 jquery 中销毁并初始化表。

function displayUser() {

var table = $('#dtVerticalScrollExample').DataTable();
table.destroy();

for (i = 0; i < userList.length; i++) {
    var $tblRow = $('<tr id="row' + i + '"/>');

    $tblRow.append('<td id="td' + i + '">' + userList[i][' inv-id'] + '</td>');
    $tblRow.append('<td id="td' + i + '">' + userList[i]['inv-com-name'] + '</td>');
    $tblRow.append('<td id="td' + i + '">' + userList[i]['inv-email'] + '</td>');
    $tblRow.append('<td id="td' + i + '">' + userList[i]['email'] + '</td>');
    $tblRow.append('<td id="td' + i + '">' + '<button onClick="edit(' + i + ')" class="btn btn-info btn-xs btn-edit">Edit</button>' + '</td>');

    $('#dtVerticalScrollExample').append($tblRow);

};
var table = $('#dtVerticalScrollExample').DataTable();

}

【讨论】：