Javascript 用XHR的结果重新填充DataTables表

我使用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>

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

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

如何使用此数据重新填充表？这是我的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
                   } );
            }

        }   
}

}

我遇到无法重新初始化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>'

---

我只是得到了一个差异，因为表一直在重新加载旧的“完整”数据，或者我在没有分页的情况下获取了表中的数据，或者其他问题告诉我表没有正确地重新初始化$销毁只是重新加载旧数据，设置serverSide:false也没有帮助。

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

常量mainTable=$'mainTable'.DataTable{ 选择权 }; url'modules/advanced_search.xq'.load；

---

我通过以这种格式返回一个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();


                }

            } 
        }        


    }

}

---

谢谢你的回复。正如我所写的，我最初不是通过Ajax加载表，而是通过eXist db模块加载服务器端。实际上，我只是通过将我的响应JSON返回为[{0:…，1:…，2:…，3:…]来让它工作。想想看吧

[ {
  "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"
} ]

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


                }

            } 
        }        


    }

}