1

In my code I am creating two tables in same page and I am using dataTables.min.js and jquery-1.10.2.js scripts;

Unfortunately I am getting an error "No data available in table" and then its shows the actual data.

enter image description here

How to remove this? and If I click on "sort" in the table header I don't see any data in the table. As I understand no data was binded to 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>
Martijn Vissers
  • 712
  • 5
  • 29
Viswesn
  • 4,674
  • 2
  • 28
  • 45
  • Possible duplicate of [jQuery DataTables "No Data Available in Table"](https://stackoverflow.com/questions/32852388/jquery-datatables-no-data-available-in-table) – adiga Jan 25 '19 at 08:39
  • Why not call the URL using the `ajax` option of DateTable....? – vikscool Jan 25 '19 at 08:52
  • @adiga I am seeing the same problem on following the duplicate stackoverflow link too - I am sharing the code here - https://gist.github.com/viswesn/0308e1514dd0f7c59b6b291a0032dfc6 and it would be great if you can help me where I am wrong. I feel that I am using more number of Javascript to load the page and it is not using the actual javascript to define the Id. – Viswesn Jan 25 '19 at 09:33
  • @vikscool Added Ajax functionality and still seeing the same result. I shared the code in the above comment. – Viswesn Jan 25 '19 at 10:52

1 Answers1

1

first your table must contain thead and tbody

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

and then you must call DataTable functions after append all row to the table :

$(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()
    });
});
Mustapha Larhrouch
  • 3,373
  • 3
  • 14
  • 28