当行大于4k-8k时,HTML表需要很长时间才能动态创建

时间:2017-08-23 06:25:25

标签: jquery json ajax html-table

我根据json数据创建了td和th,但这需要很长时间。 当行大于4k-8k时,HTML表需要很长时间才能动态创建。如何提高性能?

我有一个用于数据分析的应用程序,并且我在创建表时遇到了一些性能问题。数据是从文档中提取的,重要的是所有数据都显示在一个页面上(不幸的是,分页不是一个选项)。

使用jQuery,我向服务器发出ajax请求以检索数据。完成请求后,我将数据传递给输出函数。

 function getApplicationReport() {
            var selector = document.getElementById("excelDataTable");
            var Region = document.getElementById("watchedapp");
            var Regionvalue = Region.options[Region.selectedIndex].value;

            var Business = document.getElementById("application");


            var Businessvalue = Business.options[Business.selectedIndex].value;


            $.getJSON("/ReleaseView/GetAppsReport", { Business: Businessvalue, region: Regionvalue }, function (data) {


                //alert(JSON.stringify(data));
                var columnSet = [];
                var headerTr$ = $('<tr/>');

                for (var i = 0; i < data.length; i++) {
                    var rowHash = data[i];
                    for (var key in rowHash) {
                        if ($.inArray(key, columnSet) == -1) {
                            columnSet.push(key);
                            headerTr$.append($('<th/>').html(key));
                        }
                    }
                }
                $(selector).append(headerTr$);




                var columns = columnSet;

                    for (var i = 0; i < data.length; i++) {
                        var row$ = $('<tr/>');
                        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
                            var cellValue = data[i][columns[colIndex]];
                            if (cellValue == null) cellValue = "";
                            row$.append($('<td/>').html(cellValue));
                        }
                        $(selector).append(row$);
                    }










            })
        }

0 个答案:

没有答案