datatable show no data available in table code example
Example 1: no data available in table datatables
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!
Example 2: datatable hide no data available in table
var someTableDT = $("#some-table").on("draw.dt", function () {
$(this).find(".dataTables_empty").parents('tbody').empty();
}).DataTable(/*init object*/);