快速使用JavaScript中的JSON数据动态填充表格的方法

一尘不染

快速使用JavaScript中的JSON数据动态填充表格的方法

json

我正在尝试使用jQuery，JSON等，并遇到了以下任务。我在服务器上有一个加载程序脚本，该脚本以JSON格式返回表数据。收到JSON数据后，我想用它们填充表格。我目前正在使用类似于以下代码（有更多的列和一些更高级的处理，但您知道了）：

...
for (var key=0, size=data.length; key<size;key++) {

  $('<tr>')
            .append( $('<td>').html(
                data[key][0]
            ) )
            .append( $('<td>').addClass('whatever1').html(
                data[key][1]
            ) )
            .append( $('<td>').addClass('whatever2').html(
                data[key][2]
            ) )
            .appendTo('#dataTable');
}
...

<table id="#dataTable"></table>
...

这行得很好。但是一旦数据增长，它就会变得非常缓慢。对于很少的记录，大约需要5秒钟（Firefox，IE）来建立表，而且速度有点慢。例如，如果我在服务器上创建整个HTML并将其作为字符串发送（包括在表中），它将非常快。

那么，有没有更快的方法来填表？

注意： 我知道分页是什么，最后我将使用它，所以请不要说“页面上需要这么大的表吗？”。这个问题是关于无论您将显示多少记录，如何快速填写表格:)

阅读 407

2020-07-27

共1个答案

一尘不染

请参阅我对使用数组和“join”的早期类似查询的[响应]。

直到最后一次只调用一次时，才使用jQuery。另外，通过将字符串存储在数组中并使用“ join”方法一次性构建字符串，还可以减少字符串连接。

例如

 var r = new Array(), j = -1;
 for (var key=0, size=data.length; key<size; key++){
     r[++j] ='<tr><td>';
     r[++j] = data[key][0];
     r[++j] = '</td><td class="whatever1">';
     r[++j] = data[key][1];
     r[++j] = '</td><td class="whatever2">';
     r[++j] = data[key][2];
     r[++j] = '</td></tr>';
 }
 $('#dataTable').html(r.join(''));

2020-07-27