用 XHR 的结果重新填充 DataTables table

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>

table 被填充（通过 XQuery，而不是 DataTables）并在页面加载时启动：

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

到目前为止，还不错。然后我希望用户能够使用搜索表单生成新数据。搜索表单类似于：

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

.xq 文件 returns 一个 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"
} ]

如何使用此数据重新填充我的 table？这是我的 JavaScript 函数，由表单提交调用：

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 错误。我什至尝试重新填充 table 'by hand'，其中：

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>'

我只是发现了一个差异，因为 table 一直在重新加载旧的 'full' 数据，或者我在 table 中获取数据时没有分页，或者其他问题告诉我table 没有正确重新初始化。 $destroy 只是重新加载旧数据，设置 serverSide: false 也无济于事。

Answer 1

您无法重新初始化您 table，销毁它并重新创建它只是浪费处理能力。与其使用 JavaScript 来执行您的 Ajax 请求，不如使用内置的 Ajax 处理器，这样会容易得多。由于您似乎已经在使用内置的 Ajax 来加载您的 table 最初您可以将 URL 设置为不同的

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

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

Answer 2

我设法通过以这种格式返回 JSON 来做到这一点（即在属性名称中使用数字序列）：

[ {
  "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();


                }

            } 
        }        


    }

}

用 XHR 的结果重新填充 DataTables table

Repopulate a DataTables table with the result of a XHR

javascript

jquery

xmlhttprequest

datatables

exist-db