尽管我们在 html 表中有数据，但仍显示“表中没有可用数据”

Question

在我的代码中，我在同一页面中创建了两个表，并且我正在使用 dataTables.min.js 和 jquery-1.10.2.js 脚本；

不幸的是，我收到一个错误“表中没有可用数据”，然后它显示了实际数据。

如何去除这个？如果我点击表格标题中的“排序”，我看不到表格中的任何数据。据我了解，没有数据绑定到 ID“datatable-buttons”

    <script src="{{ url_for('static', filename='vendors/datatables.net/js/jquery.dataTables.min.js') }}"></script>

    <div class="x_content">
          <table id="datatable-buttons"   .....

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $( document ).ready(function() {
        $.getJSON("http://localhost:5000/api/v1/category", function (data) {
           $.each(data, function(i, item) {
              var tr = $('<tr>');
              $(tr).append("<td>" + item.code + "</td>");
              $(tr).append("<td>" + item.name + "</td>");
              $(tr).append("<td>" + item.description + "</td>");
              $(tr).append('</tr');
              $('#datatable-buttons').append(tr)
          });
        });
      });
     </script>

Answer 1

首先您的表必须包含thead 和tbody

<table id="datatable-buttons">
   <thead>
     <tr><th>...</tr>
   </thead>
   <tbody></tbody>
</table>

然后您必须在将所有行附加到表后调用 DataTable 函数：

$(document).ready(function () {
    $.getJSON("http://localhost:5000/api/v1/category", function (data) {
        $.each(data, function (i, item) {
            var tr = $('<tr>');
            $(tr).append("<td>" + item.code + "</td>");
            $(tr).append("<td>" + item.name + "</td>");
            $(tr).append("<td>" + item.description + "</td>");
            $(tr).append('</tr');
            $('#datatable-buttons tbody').append(tr)
        });
        $('#datatable-buttons').DataTable()
    });
});