I have encountered an issue where table data loads briefly and unformatted before jquery DataTables kicks in. After doing some research, I found that many suggest hiding the table using CSS and then showing it using jQuery with initComplete. However, despite trying different approaches, I haven't been able to get it to work successfully:
css:
#tblAccount {
visibility:hidden;
}
#tblCustomer {
visibility: hidden;
}
jquery:
$(function () {
$("[id*=tblAccount], [id *= tblCustomer]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"responsive": true,
"dom": 'lBfrtip',
"buttons": ['excel', 'print', 'pdfHtml5'],
"initComplete": function () {
$('#tblAccount').show().css({ visibility: "visible" });
$('#tblCustomer').show().css({ visibility: "visible" });
}
});
})