jQuery DataTables "No Data Available in Table"

Solution 1:

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!

Solution 2:

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.