附加到 tbody 不显示表中的数据答案

【问题标题】：Appending to tbody not showing data in table附加到 tbody 不显示表中的数据
【发布时间】：2020-04-09 18:54:51
【问题描述】：

我正在尝试将一些数据附加到 Datatables tbody。当我 console.log() 数据时，我确实收到了数据，但是当我尝试将它附加到我的数据表时，数据没有显示（我的表的 id 是“示例”顺便说一句）。我也不知道在调试方面该去哪里。

    asyncRequest.then((tracks) => {
      var tableData = '';
      // rows
      for (track in tracks) {
        tableData += '<tr>';
        tableData += '<td>' + tracks[track]._id + '</td>';
        tableData += '<td>' + tracks[track].Position + '</td>';
        tableData += '<td>' + tracks[track].Track + '</td>';
        tableData += '<td>' + tracks[track].Artist + '</td>';
        tableData += '<td>' + tracks[track].Streams + '</td>';
        tableData += '<td>' + tracks[track].Url + '</td>';
        tableData += '<td>' + tracks[track].Date + '</td>';
        tableData += '</tr>';
      }
      console.log(tableData);

      $(document).ready(function () {
        var table = $('#example').DataTable();
        $(table).find('tbody').append(tableData);
      });
    });
  </script>

曲目：[0 … 99] 0: _id: "5e8d677a6e5216bc865e084a" Position: 1 Track: "Dance Monkey" Artist: "Tones And I" Streams: 6155025 Url: "https://open.spotify.com/track/1rgnBhdG2JDFTbYkYRZAku" Date: "1/1/20"

【问题讨论】：

你应该重新渲染表格。
DataTables 通常不是这样使用的。它通常接收一个 JSON 对象，其中包含要显示的数据。看看各种data source 方法。
@andrewjames 他们的数据集中的数据是一个数组数组...我的数据集是一个 JSON 对象（对象数组），所以当我尝试这种方法时，我会收到一个警报 DataTables warning: table id=example - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4跨度>
没错，但这只是一种可能的结构。您能否编辑您的问题以显示您的数据的代表性样本？
看看these examples。其中之一应该可能与您的 JSON 的结构相匹配。列表中的前 4 个是最常见的。

标签： javascript jquery html datatables

【解决方案1】：

你可以试试这个先销毁然后追加然后刷新它

并根据请求准备好您的文档并在那里初始化

$(document).ready(function () {
        var table = $('#example').DataTable();

      });

然后在你获取数据后，它会销毁它并刷新它

asyncRequest.then((tracks) => {
      var tableData = '';
      // rows
      for (track in tracks) {
        tableData += '<tr>';
        tableData += '<td>' + tracks[track]._id + '</td>';
        tableData += '<td>' + tracks[track].Position + '</td>';
        tableData += '<td>' + tracks[track].Track + '</td>';
        tableData += '<td>' + tracks[track].Artist + '</td>';
        tableData += '<td>' + tracks[track].Streams + '</td>';
        tableData += '<td>' + tracks[track].Url + '</td>';
        tableData += '<td>' + tracks[track].Date + '</td>';
        tableData += '</tr>';
      }
      console.log(tableData);


      $('#example').DataTable().destroy();
      $('#example').find('tbody').append(str);
      $('#example').DataTable().draw();
    });

【讨论】：

TypeError: table.fnDestroy is not a function
你使用哪些库jsfiddle.net/5twrcqmx/1 我在此处添加了示例。你可以用例子改变你的图书馆，然后再试一次
谢谢@Çağrı
为了以后参考，与其这样操作内容，不如使用DataTables内置的功能来处理JSON。例如，请参阅here。由于内容更改而销毁 DataTable 对象通常不是最好的方法。它确实有效，但可能有更好的方法。