Таблицы данных не отображают последние строки

Question

У меня есть следующий бит кода, который отображается в модале начальной загрузки (если это актуально):

$(document).on('click', '.queued_auto_responders', function (event) {
    if (table_queued_responders !== null) {
        table_queued_responders.destroy();
    }
    // queued_ids from the clicked row
    var customer_id = $(this).attr('data-customer-id');
    $.ajax({
        "type": "GET",
        "url": "assets/php/get_automatic_responder.php",
        "data": {"customer_id": customer_id},
        "dataType": "json"
    }).done(function(queued_emails) {
        table_queued_responders = $('#queued_auto_responders').DataTable({
            "data": queued_emails,
            "columns": [
                { data: "queue_id", visible: false },
                { data: "send_date", title: 'Send Date' },
                { data: "title", title: "Title" },
                { data: "approved", visible: false },
                { data: "already_sent", visible: false },
                { data: null, title: 'Action', createdCell:
                function (td, cellData, rowData, row, col) {
                    var button = $("<button />",
                        {
                            "class": "btn btn-outline-danger btn-block stop-queued-responder",
                            "text": "Stop Email",
                            "type": "button"
                        }).attr("data-queue-id", rowData.queue_id);

                        if (rowData.approved == 1 && rowData.already_sent == 0) {
                            $(td).html(button.prop("outerHTML"));
                        } else {
                            $(td).html("");
                        }
                    }
                }
            ]
        });
    }).always(function() {
        table_queued_responders.draw();
    });
    $('#queued_auto_responders').closest('.table-responsive').css('display', '');
});

Странно, что этот код действительно работает, но только в некоторых случаях,Иногда он отображает данные без каких-либо проблем, но иногда он не отображает данные и вместо этого отображает: "Не найдено подходящих записей." в теле, а затем "Отображение от 0 до 0 из 0 записей (отфильтровано из n записей) " где n - количество возвращенных записей.

Если я проверяю свою вкладку сети, я подтверждаю, что каждый раз возвращаются данные.

Кроме того, что происходит, если я нажимаю на элемент DOM, у которого есть .queued_auto_responders, он открывает модальное окно и на короткое время хранит старые данные из предыдущего элемента DOM, прежде чем снова показывает сообщение. .

ОБНОВЛЕНИЕ

Согласно предложению Билала Ахмеда, я также попытался один раз инициализировать таблицу (вместо вызова уничтожения), удалить существующие строки и затем добавитьновые:

// upcoming auto-responder button click
var table_queued_responders = table_queued_responders = $('#queued_auto_responders').DataTable({
    "columns": [
        { data: "queue_id", visible: false },
        { data: "send_date", title: 'Send Date' },
        { data: "title", title: "Title" },
        { data: "approved", visible: false },
        { data: "already_sent", visible: false },
        { data: null, title: 'Action', createdCell:
        function (td, cellData, rowData, row, col) {
            var button = $("<button />",
                {
                    "class": "btn btn-outline-danger btn-block stop-queued-responder",
                    "text": "Stop Email",
                    "type": "button"
                }).attr("data-queue-id", rowData.queue_id);

            if (rowData.approved == 1 && rowData.already_sent == 0) {
                $(td).html(button.prop("outerHTML"));
            } else {
                $(td).html("");
            }
        }
        }
    ]
});
$(document).on('click', '.queued_auto_responders', function (event) {
    table_queued_responders.rows().remove().draw();
    // queued_ids from the clicked row
    var customer_id = $(this).attr('data-customer-id');
    $.ajax({
        "type": "GET",
        "url": "assets/php/get_automatic_responder.php",
        "data": {"customer_id": customer_id},
        "dataType": "json"
    }).done(function(n) {
        table_queued_responders.rows.add(n).draw();
    });
    $('#queued_auto_responders').closest('.table-responsive').css('display', '');
});

Такое же поведение происходит, за исключением отображения старых данных, теперь даже этого не происходит.

Обновление 2

Мне удалось заставить его работать, буквально просматривая ответ от вызова AJAX и вручную добавляя строки по одной. Я понятия не имею, почему он не работает при вызове rows.add, но работает с row.add.

Answer 1

Удалите лишние table_queued_responders = при DataTable() инициализации.

// upcoming auto-responder button click
var table_queued_responders = $('#queued_auto_responders').DataTable({
    "columns": [
        { data: "queue_id", visible: false },
        { data: "send_date", title: 'Send Date' },
        { data: "title", title: "Title" },
        { data: "approved", visible: false },
        { data: "already_sent", visible: false },
        { data: null, title: 'Action',
    createdCell: function (td, cellData, rowData, row, col) {
            var button = $("<button />",
                {
                    "class": "btn btn-outline-danger btn-block stop-queued-responder",
                    "text": "Stop Email",
                    "type": "button"
                }).attr("data-queue-id", rowData.queue_id);

            if (rowData.approved == 1 && rowData.already_sent == 0) {
                $(td).html(button.prop("outerHTML"));
            } else {
                $(td).html("");
            }
        }
        }
    ]
});

Plus, измените ваше событие click() на следующий код:

$(document).on('click', '.queued_auto_responders', function (event) {
// queued_ids from the clicked row
var customer_id = $(this).attr('data-customer-id');
$.ajax({
    type: 'GET',
    url: 'assets/php/get_automatic_responder.php',
    data: {'customer_id': customer_id},
    success : function(data){
        table_queued_responders.rows().remove().draw();
        if (data.length > 0) {
           table_queued_responders.rows.add(data).draw();
        }
      }
    });
    //$('#queued_auto_responders').closest('.table-responsive').css('display', '');
});

как указан код вышеЯ запрашиваю данные и заполняю их в таблицы данных. Небольшое изменение заключается в том, что я заменил событие .done() на .success() и удалил предыдущие данные сразу после достижения .success(). Этот код работает на моей стороне. Попробуйте и дайте мне знать!