Добавьте 500 000 строк в таблицу, используя JavaScript, не сбивая страницу

Question

У меня есть система отчетов, в которой пользователь щелкает отчет, выполняется SQL и результаты отображаются в таблице.У меня проблема в том, что один отчет возвращает более 500 000 строк для отчета.Системе требуется время для извлечения данных с помощью вызова AJAX, однако, как только он закончил, браузер «зависает», пока он добавляет HTML-код на страницу.

У меня такой вопрос, есть ли другой способ?Я могу добавить HTML-код на страницу, не вызывая зависания браузера?

var HTMLPRE = '<p class="text-center"><b id="lblReportStatus">Producing report...</b><br><small>Average time: ' + parseFloat($('#hidReportID').attr('data-avg')).toFixed(2) + ' seconds</small>' +
    '<br><small>Current time: <span id="divCurrentTimeTaken">0</span></small></p>';
window.CurrentTimer = 0;
$('#reportresults').html(HTMLPRE);
// start the timer
window.ProducingReportTimer = window.setInterval(function() {
    window.CurrentTimer++;
    $('#divCurrentTimeTaken').html(window.CurrentTimer + ' seconds');
}, 1000);

$.post(window.routes['ReportWriter.ProduceReport'], FormData, function(resp, status) {
    if (status === 'success') {
        if (resp.code == '200') {
            $('#lblReportStatus').text('Generating report...<br>Please note your browser may become un-responsive.  Please wait for a few minutes if this happens.');
            ProduceReportTable(resp);
        }
    } else {
        alert("Unable to produce report.  Please contact support with the below information:\r\nStatus code" + status);
    }
}).fail(function(err, status) {
    alert("Unable to produce report.  Please contact support with the below information:\r\n" + err);
});

function ProduceReportTable(resp){
    var ReportHTML = '<div class="row"><div class="col-xs-12"><button class="btn btn-primary" id="btnExportExcel"><i class="fa fa-file-excel"> Excel</i></a></div>' +
        '</div><div class="col-xs-12"><div class="table-responsive" style="overflow-x: auto;">' +
        '<table class="table-hover table-striped table" id="tblReport">' +
        '<thead><tr>';
    // loop through the headers first
    $(resp.headers).each(function (idx, head) {
        ReportHTML += '<th>' + head + '</th>';
    });

    ReportHTML += '</tr></thead><tbody>';
    // loop through the data

    $(resp.rows).each(function (idx, row) {
        ReportHTML += '<tr>';
        $.each(row, function() {
            ReportHTML += '<td>' + (this instanceof Window ? '' : this) + '</td>';
        });
        ReportHTML += '</tr>';
    });
    ReportHTML += '</tbody></table></div></div>';
    $('#reportresults').html(ReportHTML);
    window.clearInterval(window.ProducingReportTimer);
    /*
    $('#tblReport').dataTable({
        deferRender:    true,
        /*scrollY:        200,*//*
        scrollCollapse: true,
        scroller:       true
    });*/

    // enable the excel button
    $('#btnExportExcel').on('click', function(e){
        e.preventDefault();
        let TableSource = document.getElementById('tblReport');
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();
        if(dd<10) {
            dd = '0'+dd
        }
        if(mm<10) {
            mm = '0'+mm
        }
        today = yyyy + '-' + mm + '/' + dd;
        GenerateXLSX(TableSource, true, resp.ReportName + '-' + today + ".xlsx")
    });
}

Извините, если на этот вопрос был дан ответ в другом месте, я выполнил поиск и не смог ничего найти.

Answer 1

Нет.Комментарии уже выявили отличные ответы;Суть в том, что возвращение такого количества строк - это плохая идея с точки производительности (ничто не может правильно отобразить столько данных), с точки пользователя (никто не может работатьс этим большим количеством данных одновременно) и с точки безопасности (вы рискуете огромной DoS-атакой на ваше приложение).Единственный вариант использования, который я могу себе представить, - это создание отчета, и в этом случае вы должны экспортировать документ Excel / PDF вместо того, чтобы показывать его в HTML.

Для решения вашихпроблема.Если у вас есть для использования JavaScript для этого, используйте jquery Datatables и подходящую конечную точку AJAX в вашем приложении.