如何在通过 JavaScript 注入值之前重绘数据表

Question

我想要一个table来保存上传文件的历史记录

Here is a dummy example of what I did so far

每当我更新 table 通过 JS 注入一些值时，带有文本 No data available in table 的行仍然出现。

我尝试了中提供的解决方案，但 none 对我有用

如有任何帮助，我们将不胜感激

Answer 1

发生这种情况是因为您的数据table 对象不知道在DOM 中所做的更改。您需要使用 datatables rows.add() api 而不是将 <tr><td> 附加到您的 table.

请按如下方式修改您的javascript。注意在 $.each 中使用 DT1.row.add 而不是 $('#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'
    });
});

如何在通过 JavaScript 注入值之前重绘数据表

How to redraw a Datatable before injecting values via JavaScript

datatables