虽然我们在html表中有数据，但仍然显示“表中没有数据”。

Question

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

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

​

怎么去掉这个？如果我单击表标题中的“排序”，我在表中看不到任何数据。据我所知，没有数据绑定到Id“datatable-button”

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