Динамически добавлять данные в DataTables

Question

В настоящее время я программирую сканер на Python.Этот сканер хранит данные в базе данных mongoDB.Я хотел бы загрузить данные динамически в таблицу без перезагрузки всей страницы.

Мой текущий (соответствующий) код выглядит следующим образом:

var $tagsLabel = $("<lable>")
var $tagsInput = $("<textarea>");

/* Formatting function for row details - modify as you need */
function format(d) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
        '<td>Raw text:</td>' +
        '<td>' + d.Raw_html + '</td>' +
        '</tr>' +
        '</table>';
}

$(document).ready(function () {
    $table = $("#dataTable")
        .on("preInit.dt", function (e, settings) {
            $tagsLabel.append($tagsInput);
            $('.dataTables_tags').append($tagsLabel)
        })
        .on("init.dt", function (e, settings) {
            $tagsInput.tagEditor({
                delimiter: ', ',
                placeholder: 'Enter search tags ...',
                onChange: function (field, editor, tags) {
                    if (tags.length) {
                        if (tags.length > 1) {
                            $table.search(tags.join('|'), true, false).draw();
                        } else {
                            $table.search(tags[0]).draw();
                        }
                    } else {
                        $table.search('').draw(true);
                    }
                },
            });
        })
        .DataTable({
            "dom": '<l<"dataTables_tags"><t>ip>',
            "ajax": '/json-int',
            "columns": [
                {
                    "class": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": '',
                    width: "5px"
                },
                {"data": "Timestamp", width: "135px"},
                {"data": "Title"},
                {"data": "Url"},
                {"data": "domain"},
                {"data": "Type"},
                {"data": "Raw_html", "visible": false}
                //{"data": "Raw_html", "visible": false}

            ],
            "order": [[1, 'asc']]
        });


    // Add event listener for opening and closing details
    $('#dataTable tbody').on('click', 'td', function () {
        var tr = $(this).closest('tr');
        var row = $table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child(format(row.data()), 'no-padding').show();
            tr.addClass('shown');

        }
    });

    $('#dataTable tbody').on('click', 'td > button', function (e) {
        alert('Tada!');
        return false;
    });
});



<table id="dataTable" class="table table-striped table-hover table-bordered table-condensed"
                           style="width: 100%; font-size: 12px" role="grid">
                        <thead>
                        <tr>
                            <th></th>
                            <th>Timestamp</th>
                            <th>Title</th>
                            <th>URL</th>
                            <th>Domain</th>
                            <th>Page Type</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th></th>
                            <th>Timestamp</th>
                            <th>Title</th>
                            <th>URL</th>
                            <th>Domain</th>
                            <th>Page Type</th>
                        </tr>
                        </tfoot>
                    </table>

Функция, которую япытаюсь использовать для динамического обновления таблицы:

    function updateTable() {
    $(document).ready(function () {
        var t = $('#dataTable').DataTable();
        $.ajax({
            type: "GET",
            url: "/json",
        }).done(function (data) {

            var parsed = JSON.parse(data);

             parsed.forEach((obj, i) => {
                t.row.add([
                    obj.Timestamp,
                    obj.Title,
                    obj.Url,
                    obj.domain,
                    obj.Type,
                    obj.Raw_html
                ]).draw(false);
            });
        }).fail(function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR, textStatus, errorThrown);
        })
    });
}
setInterval(updateTable, 5000);

Таблица загружается нормально, и если я перезагружаю всю страницу, данные загружаются в DataTable.Каждый раз, когда функция запускается для динамического обновления таблицы, я получаю следующую ошибку:

Предупреждение DataTables: table id = dataTable - запрошенный неизвестный параметр 'Timestamp' для строки 0, столбца 1. Для более подробной информацииинформацию об этой ошибке см. http://datatables.net/tn/4

Я опубликовал пример данных, которые я пытаюсь динамически загрузить в таблицу: https://myjson.com/re9cu

Надеюсь, кто-то может указать мнев правильном направлении.

РЕДАКТИРОВАТЬ: Извините, возможно, я не описал вопрос достаточно ясно.Когда я загружаю страницу, данные загружаются.Но я хотел бы добавить новые строки в таблицу, когда появятся новые данные./ json предоставляет эти новые данные каждый раз, когда их запрашивают.

Answer 1

Вам не нужно изобретать свой собственный велосипед, он уже есть https://datatables.net/examples/data_sources/ajax.html. Вам просто нужно расширить инициализацию DataTable с помощью соответствующего параметра:

var t = $('#dataTable').DataTable({
    ajax: '/url/to/script/feeding/data',
    ...
});