jquery - jQuery 无法在 ajax 调用中更新 DOM

Question

我有我的 ASP.NET Core 项目。在页面中 Web 应用程序从 Web API 读取数据。通常，数据很大：data.Rows可能有 15000 行。我想将每一行添加到表中，但同时我想向用户提供进度状态。

$.ajax({
    url: url,
    data: 'filename=' + filename,
    dataType: 'json'
})
    .fail(function (err) {
        alert(err);
    })
    .done(function (data) {
        var dataLength = data.Rows.length;
        $.each(data.Rows, function (index, obj) {
            console.log('Reading ' + index + ' rows of ' + dataLength)
            if ($('#progressbar').length)
                $('#spanMessage').html('Reading ' + index + ' rows of ' + dataLength);

            tbl += '<tr>';
            var num = 0;
            $.each(obj, function (_, text) {
                tbl += '<td>' + text + '</td>';
                num++;
            });
            if (num < data.Headers.length)
                for (var i = 0; i < data.Headers.length - num; i++) {
                    tbl += '<td></td>';
                }
            tbl += "<td></td></tr>";
        });
        tbl += '</tbody>';
    }

这是一个漫长的过程，用户界面不会改变。该过程完成后，我可以按预期看到表格。

如何定期更新 UI？

标签： jquery