javascript - 初始化空的 JQuery 数据表并向其添加项目

Question

我正在尝试初始化一个空数据表并向其中添加项目。我的数据表是从一个数组中填充的。但是，当我将项目添加到数组并刷新数据表时，出现此错误:

Uncaught TypeError: Cannot set property 'data' of null
    at _fnBuildAjax (jquery.dataTables.js:3962)
    at __reload (jquery.dataTables.js:7582)
    at _Api.<anonymous> (jquery.dataTables.js:7640)
    at _Api.iterator (jquery.dataTables.js:7029)
    at _Api.<anonymous> (jquery.dataTables.js:7639)
    at Object.reload (jquery.dataTables.js:7197)
    at HTMLDocument.<anonymous> (Create:77)
    at HTMLDocument.dispatch (jquery-3.3.1.js:5183)
    at HTMLDocument.elemData.handle (jquery-3.3.1.js:4991)
    at Object.trigger (jquery-3.3.1.js:8249)

这是我的数据表代码:

    var data = ["Test"]
    var data2 = ["Test2"]
    var dataSet = [];
    dataSet.push(data);
    dataSet.push(data2);
    var rowItem = "";
    $(document).ready(function () {
        var table = $("#table").DataTable({
            "data": dataSet,
            "filter":false,
            "language": {
                "search": "",
                "searchPlaceholder": " Search"
            },
            "select": {
                "style": 'multi'
            },
            "ordering": true,
            "lengthChange": false,
            "columns": [
               { "title": "Name"},
            ],
            "responsive": true,
            "processing":true,
        }).columns.adjust()
        .responsive.recalc();
        new $.fn.dataTable.FixedHeader(table);

这就是我将项目添加到数组并重新加载表的方式:

    $(document).on($.modal.AFTER_CLOSE, function (event, modal) {
        console.log(dataSet);
        dataSet.push([rowItem]);
        table.ajax.reload();
        $("#modal").empty();
    });

为什么它说我的数据集是空的？当我在控制台上显示它时，它包含前 2 个预加载的项目和我添加的接下来的几个项目。

Answer 1

ajax 用于服务器端请求，对于 javascript 数组或本地数组，您需要使用 datatanles

table.draw()

当你有 ajax 时，你需要初始化

serverside:true and then use ajax.reload();

$(document).on($.modal.AFTER_CLOSE, function (event, modal) {
    console.log(dataSet);
      table.clear();
      table.rows.add(dataSet);
      table.draw();
      $("#modal").empty();
});