How to redraw a Datatable before injecting values via JavaScript - datatables

Question

I would like to have a table to keep a history of the uploaded files
Here is a dummy example of what I did so far
Whenever I update the table injecting some values via JS, the row with the text No data available in table still appears.
I've tried the solutions provided in other questions but none of them worked for me
Any help would be appreciated

Answer 1

This happens because your datatable object is unaware of the changes that were made in DOM. You need to use the datatables rows.add() api instead of appending <tr><td> to your table.
Please modify your javascript as below. Notice the use of DT1.row.add inside your $.each instead of $('#nameBody').append :
$(document).ready(function() {
$('#fileholder').change(function(e){
var files = $('#fileholder').prop("files")
var names = $.map(files, function(val) { return val.name; });
var modDates = $.map(files, function(val) { return val.lastModifiedDate; });
$.each(names, function(index){
DT1.row.add([names[index], modDates[index]]).draw();
});
});
var DT1 = $('#names').DataTable({
columnDefs: [
{ className: 'text-center', targets: [1] },
],
order: [
[1, 'asc']
],
dom: 'rt'
});
});