Инициализируйте пустые JQuery Datatables и добавьте в них элементы

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 или локального массива необходимо использовать

table.draw ()

и когда у вас есть ajax, вам нужно инициализировать

serveride: true и затем использовать ajax.reload ();

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