javascript - 单击时使用 AJAX 将数据加载到数据表

Question

我正在使用数据表在单击 D3 图表中的元素时将数据加载到表中。我有以下用于初始化表的代码：

$(document).ready(function () {
    Table = $('#data-table').DataTable({
        data: [],
        "columns": [
            { "data": "error_code" },
            { "data": "message" }
        ]
    });
});

现在我有另一个点击功能如下：

    $.ajax({
        method: "POST",
        data: { code: node.data.name },
        url: "get_table_data"
    }).done(function (data) {
        console.log(data);
        Table.clear().draw();
        Table.rows.add(data);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    });

我从服务器获取数据并以正确的格式记录到控制台。但是数据没有加载到表中。它正在显示No data available in table。

PS：表初始化和使用ajax加载数据的代码在两个javascript文件中。

标签： javascriptjquerydatatables

Answer 1

按照 DataTable 文档中的示例，您应该在添加数据后重新绘制表格：

...
}).done(function (data) {
        Table.clear().rows.add(data).draw();
}).fail(...)
...