jQuery DataTables "No Data Available in Table"

Please try to initiate the dataTable after your AJAX loaded table is appended on body.

$ ( document ).ready(function() {$.ajax({    type: 'GET',    url: 'models/summary.php',    mimeType: 'json',    success: function(data) {        $.each(data, function(i, data) {            var body = "<tr>";            body    += "<td>" + data.name + "</td>";            body    += "<td>" + data.address + "</td>";            body    += "<td>" + data.phone_no + "</td>";            body    += "<td>" + data.birthday + "</td>";            body    += "<td>" + data.color + "</td>";            body    += "<td>" + data.car + "</td>";            body    += "<td>" + data.hobbies + "</td>";            body    += "<td>" + data.relatives + "</td>";            body    += "</tr>";            $( "#summary-table tbody" ).append(body);        });        /*DataTables instantiation.*/        $( "#summary-table" ).DataTable();    },    error: function() {        alert('Fail!');    }});});

Hope, this would help!

When loading data via AJAX to a DataTable, just use the DataTable row.add() API as documented here.

In your AJAX response (assuming you initiated a DataTable called myTable):

$.each(data, function(i, data) {    myTable.row.add([data.name, data.address,...]);});myTable.draw();

I find this method easier because I don't have to build the html - I can just pass an array of data to the row.add() method on my DataTable object.