How To get data(table) from an url and put it into Jquery DataTable

Question

So I got this html table

<table id="tabel_komponen" class="datatable-1">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
    </tr>
  </thead>
  <tbody id="badan_tabel">
  </tbody>
</table>

and the function to call the data from an url and to append the data into the table

function init()  {
  for(x=1;x<=100;x++) {
    $.get("http://somewebsite/data/data_user", {id:x}, function(data) 
    { 
        console.log(data);
        var tr="<tr><td>" + data.A + "</td>";
            tr += "<td>" + data.B + "</td>";
            tr += "<td>" + data.C + "</td>";
            tr += "<td>" + data.D + "</td>";
            tr += "<td>" + data.E + "</td>";
            tr += "<td><button img class='editbtn' onclick='edit_komponen("+x+")'>edit</button></td></tr>";
            tr += "<td><button img class='savetbtn' onclick='edit_komponen("+x+")'>edit</button></td></tr>";

        $("#tabel_komponen").append(tr);
     });
   }
 }

I already use the datatable plugin but it always gave me a result that say "No Data In The Table"

this is the script I use to call the dataTable Function

$(document).ready(function() {
  $('.datatable-1').dataTable();
  $('.dataTables_paginate').addClass("btn-group datatable-pagination");
  $('.dataTables_paginate > a').wrapInner('<span />');
  $('.dataTables_paginate > a:first-child').append('<i class="icon-chevron-left shaded"></i>');
  $('.dataTables_paginate > a:last-child').append('<i class="icon-chevron-right shaded"></i>');
});

Thanks

Answer 1

The most severe part is that you have a mismatch between the number of <th> 's and the number of <td> 's in each <tr> inserted to <tbody> .

When you are dealing with dataTables this way, it is absolutely essential that the number of <th> elements is equal to the number of <td> 's in each row. Thats why you never get any data in the dataTable - it simply fails to initialise. So you must correct this.

Instead of building up a <tbody> in code you should pass an array on the form [[A,B,C,etc][A,B,C,etc]..] to dataTables as data . It is more effcient if you let dataTables itself build the underlying <tbody> structure :

function init()  {
    var data = [];
    for (var x=1;x<=100;x++) {
       $.get("http://somewebsite/data/data_user", {id:x}, function(response) { 
          data.push([
            response.A,
            response.B,
            response.C,
            response.D,
            response.E,
            "<button img class='editbtn' onclick='edit_komponen("+x+")'>edit</button>",
            "<button img class='savetbtn' onclick='edit_komponen("+x+")'>edit</button>"
          ]);
          if (x==100) return data;
      })
   }
}

initialisation :

$(document).ready(function() {
  $('.datatable-1').dataTable({
     data: init() //NB!
  })
);

NB: If you are using 1.9.x or below, use aaData : init() instead.