0

I have my project with ASP.NET Core. In a page The web application reads data from a Web API. Usually, the data are quite big: data.Rows could have 15000 rows. I want to add each row to a table but at the same time I want to give to the user the progress status.

$.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>';
    }

This is a long process and the UI doesn't change. After the process is completed, I can see the table as expected.

How can I update the UI regurarly?

Enrico
  • 3,592
  • 6
  • 45
  • 102
  • 1
    Is this what you're looking for? https://stackoverflow.com/questions/19126994/what-is-the-cleanest-way-to-get-the-progress-of-jquery-ajax-request – Hozeis Aug 19 '21 at 11:43
  • 1
    You can update the UI if you a) change the code to use DOM node insertion methods instead of building table HTML as one giant chunk and b) restructure the response processing with `setTimeout` to work in chunks and yield control to the browser between chunks. But... what would you gain? Updating the DOM like that is quite likely to be a bad user experience with the page changing size while the user is looking at it -- and even if not, a table with 15K rows is itself bad UX. Perhaps introducing a paged table would solve all these issues in a better way. – Jon Aug 19 '21 at 11:58
  • @Jon you are right but this is an internal application for my company and they want to see all the records in one go. I hate that but they don't want to change their mind – Enrico Aug 19 '21 at 12:43

0 Answers0