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

Question

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

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

如何删除它？如果单击表格标题中的“排序”，则表格中没有任何数据。据我了解，没有数据绑定到ID“数据表按钮”

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