CODEWITHSUNDEEP
javascripthtmlhtml-table
Viswesn
Viswesn

Reputation: 4880

"No data available in table" is displayed though we have data in the html table

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>

Upvotes: 1

Views: 1625

Answers (1)

Mustapha Larhrouch
Mustapha Larhrouch

Reputation: 3393

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

Upvotes: 1

Related Questions