javascript - 附加到 tbody 时不显示表中的数据

Question

我正在尝试将一些数据附加到数据表主体中。当我 console.log() 数据时，我确实收到了数据，但是当我尝试将其附加到我的数据表时，数据没有显示(顺便说一句，我的表的 id 是“example”)。我也不知道该去哪里调试。

    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”
职位:1
轨道:《舞猴》
艺术家:《音调与我》
流:6155025
网址:“https://open.spotify.com/track/1rgnBhdG2JDFTbYkYRZAku”
日期:“1/1/20”

Answer 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();
    });