如何将数据附加到 jquery 中的数据表？答案

【问题标题】：How to append data to datatables in jquery?如何将数据附加到 jquery 中的数据表？
【发布时间】：2019-07-02 13:36:38
【问题描述】：

我一直在尝试将数据附加到 jquery 中的数据表，数据正在附加到数据表但数据表无法正常工作，这意味着排序、分页、搜索不起作用。数据表中甚至有数据，但它显示 0 条记录。我正在努力使所有功能正常工作，请帮助我。

<table id="newexample1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Employee</th>
            <th>InTime</th>
        </tr>
    </thead>
    <tbody class="tablebody">
    </tbody>
</table>
<script>
    function newfunction() {
        $(".tablebody").append("<tr onclick='historyfunction()'><td>Sasi Kumar</td><td>Suresh Kumar</td><td>21/06/2019 10:59:02</td></tr>");
    }
</script>
<script>
    $(document).ready(function() {
        $('#newexample1').DataTable();
    });
</script>

我期待一个合适的数据表。

【问题讨论】：

你有什么错误吗？
没有错误，但是排序、分页、搜索框不工作
请阅读您使用的标签的描述。 datatable 错了。
添加新行后，你必须destroy 和re-draw 表然后一切都会好起来的

标签： javascript jquery html datatables

【解决方案1】：

function newfunction() {
        $(".tablebody").append("<tr onclick='historyfunction()'><td>Sasi Kumar</td><td>Suresh Kumar</td><td>21/06/2019 10:59:02</td></tr>");
        $(".tablebody").append("<tr onclick='historyfunction()'><td>omar omar</td><td>Suresh Kumar</td><td>21/06/2019 10:59:02</td></tr>");
    }

    $(document).ready(function() {
        newfunction();
        $('#newexample1').DataTable();
    });

Here 一个工作中的 JSfiddle

在您的代码中，newfunction() 从未被调用，因此当 Datatable 尝试呈现表格时，表格为空。在 $(document).ready(function() 中实例化渲染数据表之前添加行（否则您将获得 0 行表）。否则，如果要在渲染 Datatable 后添加行，请使用 rows.add()，然后使用 draw() 函数在屏幕上重新绘制表格。

【讨论】：