Повторно заполнить таблицу DataTables результатом XHR

Question

Я использую Jquery DataTables для отображения длинного списка записей:

<table id="mainTable" class="display">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Date</th>
                        <th>Sender</th>
                        <th>Recipient</th>
                    </tr>
                </thead>
                <tbody id='mainTableRows'>
                    <tr><td><td></tr>[etc...]
                </tbody>

Таблица заполняется (через XQuery, а не DataTables) и инициируется при загрузке страницы:

$(document).ready(function() {$('#mainTable').DataTable({ }) } );

Пока все хорошо. Затем я хочу, чтобы пользователь мог генерировать новые данные с помощью формы поиска. Форма поиска выглядит примерно так:

<form id="advancedSearch" action="modules/advanced_search.xq" method="post" onsubmit="advancedSearch(this);">

.xq-файл возвращает JSON, например:

[ {
  "dateSent" : "1768-01-19",
  "personSentFullName" : "Robert Thomas",
  "personReceivedFullName" : "Richard Morris",
  "id" : "e34712"
}, {
  "dateSent" : "1768-04-23",
  "personSentFullName" : "Robert Thomas",
  "personReceivedFullName" : "Richard Morris",
  "id" : "e34716"
}, {
  "dateSent" : "1768-10-25",
  "personSentFullName" : "Robert Thomas",
  "personReceivedFullName" : "Richard Morris",
  "id" : "e34779"
}, {
  "dateSent" : "1769-01-16",
  "personSentFullName" : "Robert Thomas",
  "personReceivedFullName" : "Richard Morris",
  "id" : "e34805"
} ]

Как я могу использовать эти данные для повторного заполнения своей таблицы? Это моя JavaScript функция, вызываемая формой submit:

function advancedSearch (oFormElement) {
event.preventDefault()

       $('#mainTable').DataTable()

               .clear()
               .draw();                       
    const oReq = new XMLHttpRequest();
    const data = new FormData(oFormElement)

    oReq.open("post", oFormElement.action, true);
    oReq.send(data);

    oReq.onreadystatechange = function () {
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            const result = JSON.parse(this.responseText);

            if (result == null)
            {
                document.getElementById("result").innerHTML = "empty"
            } else {

                $('#mainTable').DataTable( {
                       ajax: result
                   } );
            }

        }   
}

}

Я получаю Cannot reinitialise DataTable ошибку. Я даже пытался заново заполнить таблицу «вручную» с помощью:

for (var i = 0; i < result.length; i++) {

document.getElementById("mainTableRows").innerHTML += '<tr><td>' + result[i].id + '</td><td>' + result[i].dateSent + '</td><td>' + result[i].personSentFullName + '</td><td>' + result[i].personReceivedFullName + '</td><tr>'

Я просто получаю несоответствие, так как таблица продолжает перезагружать старые «полные» данные, или я получаю данные в таблице без нумерации страниц или других проблем, которые говорят мне, что таблица не была инициализирована должным образом. $destroy просто перезагружает старые данные, и установка serverSide: false тоже не помогает.

Answer 1

Вы не можете повторно инициализировать свой стол, и уничтожение и воссоздание его - просто трата вычислительной мощности. Вместо использования JavaScript для выполнения вашего запроса Ajax используйте встроенный процессор Ajax, это намного проще. Поскольку вы, кажется, уже используете встроенную Ajax для начальной загрузки таблицы, вы можете просто установить другой URL.

const mainTable = $('#mainTable').DataTable({
    options
});

mainTable.ajax.url('modules/advanced_search.xq').load();

Answer 2

Мне удалось сделать это, вернув JSON в этом формате (т.е. с числовой c последовательностью в именах атрибутов):

[ {
  "0" : "e34712",
  "1" : "1768-01-19",
  "2" : "Robert Thomas",
  "3" : "Richard Morris"
}, {
  "0" : "e34716",
  "1" : "1768-04-23",
  "2" : "Robert Thomas",
  "3" : "Richard Morris"
}, {
  "0" : "e34779",
  "1" : "1768-10-25",
  "2" : "Robert Thomas",
  "3" : "Richard Morris"
}, {
  "0" : "e34805",
  "1" : "1769-01-16",
  "2" : "Robert Thomas",
  "3" : "Richard Morris"
} ]

, и это моя рабочая JavaScript:

"use strict";

function advancedSearch (oFormElement) {
    event.preventDefault()
                    var table = $('#mainTable').DataTable()
                    table.clear()


    if (oFormElement.pe1id.value == '' && oFormElement.pe2id.value == '') {
        alert('You have to enter at least one person.');
        return false;
    } else {

        const oReq = new XMLHttpRequest();
        const data = new FormData(oFormElement)

        oReq.open("post", oFormElement.action, true);
        oReq.send(data);

        oReq.onreadystatechange = function () {
            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
                const result = JSON.parse(this.responseText);

                if (result == null)


                {
                        table.draw()
                } else {
                     {

                        table.rows.add(result)
                         table.draw();


                }

            } 
        }        


    }

}