CODEWITHSUNDEEP
javascriptperformanceasynchronoussettimeout
Dhruv
Dhruv

Reputation: 10713

Javascript: Generate large table in DOM asynchronously.

I am trying to create a large table in IE 9 with the following code on click of button.

$(document).ready(function() {
        $("#generateTable").click(function() {
            generateTable1();
        });
    });

    function generateTable() {

    $('#sampletable').html("");
        try {
            var content = "<table border=1>"

            for (j = 0; j < 360; j++) {

                content += '<tr>';
                for (i = 0; i < 3000; i++) {
                    content += '<td>' + j + '</td>';
                }
                content += '</tr>';

            }

            content += "</table>"
            $('#sampletable').html(content);
        } catch (err) {
            alert(err);
        }
    }

As expected IE is getting chocked / hanged while creating this table. So I want to create this table asynchronously using JavaScript asyn pattern (I guess building table in chucks using settimeout method...).

How to make this generateTable() call asynchronous ?

Upvotes: 1

Views: 1981

Answers (2)

Dhruv
Dhruv

Reputation: 10713

Here is the code I have written. This code adds the row in the table in chunks and therefore browser do not hangs. 

<script>
        $(document).ready(function() {
            $("#generateTable").click(function() {
                generateTable();
            });
        });

        function generateTable() {
        // Initialize a few things here...

        var batchSize = 2;
        var rowNum = 365;
        var totalRow = 0;
        $('#reportTable').hide();

        var buildTableAsync = function(batchSize) {
            var content;
            var processedRow = 0;

            while (processedRow < batchSize) {
                content += "<tr>";
                for ( var i = 0; i < 1500; i++) {
                    content += '<td>' + i + '</td>';
                }
                content += "</tr>";
                processedRow++;
                totalRow++;
            }
            $('#reportTable').append(content);
            if (totalRow < rowNum) {

                setTimeout(function() {
                    doOneFactorialStep(batchSize);
                }, 1);
            } else {

            $('#reportTable').show();
            }
        };
        buildTableAsync(batchSize);
    }
    </script>

Upvotes: 0

Chetan S
Chetan S

Reputation: 23823

Rendering the table is probably what's causing the bad performance, not the generation of it. If you do it asynchronously, it may make it worse since the browser would need to constantly run the table column sizing algorithm and reflow and repaint the table (although it may be better than causing a long running script warning).

Try making the table fixed layout and explicitly set the widths of the columns so it doesn't have to run column sizing. Is pagination an option? Pretty sure nobody's gonna want to see a million cells at once. You may also look at plugins that do virtual scrolling.

Upvotes: 1

Related Questions