«Нет данных, доступных в таблице» отображается, хотя у нас есть данные в таблице HTML

Question

В моем коде я создаю две таблицы на одной странице и использую сценарии dataTables.min.js и jquery-1.10.2.js;

К сожалению, я получаю сообщение об ошибке «Нет данных в таблице», а затем отображаются фактические данные.

Как это убрать? и если я нажимаю «сортировать» в заголовке таблицы, я не вижу никаких данных в таблице. Как я понимаю, данные не были привязаны к идентификатору "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()
    });
});