Question

我只是想知道通过jQuery添加很多（有时是大约1000）表行的最有效方法是什么。目前我使用jQuery ajax通过JSON获取数据然后我循环遍历json对象并将html构造成变量然后将该html添加到表中。 e.g。

var arrayObject = $.parseJSON(data);
var htmlToShow = '';
$.each(arrayObject, function(index, value){
    var htmlToShow += '<tr><td>' + value[0] + '</td><td>' + value[1] + '</td></tr>';
});
$('#tableResults').html(htmlToShow);

我只是想知道这样做最不密集的方法是什么？提前谢谢。

Answer 1

我认为在JSON中发送行数据比在服务器端发送HTML代码更好。在客户端执行此操作的有效方法是（数组操作比字符串连接快得多）：

var rows = $.parseJSON(data);
var html = [];
for (var i=0; i < rows.length; i++){
    html.push('<tr><td>' + rows[i].column + '</td></tr>');
}    
$('#tableResults').html(html.join(''));

更新：正如hradac在下面的评论中所示，在具有更快JS引擎（Chrome，FF）的较新浏览器上，字符串连接比数组连接更快 - proof

Answer 2

我认为将HTML代码隐藏在服务器端，甚至是JavaScript代码都不是一个好主意。这是一种普遍接受的做法，您应该将您的内容，演示和行为分开。这类似于MVC的想法。

有一个名为DataTables的JQuery插件。它非常适合开发动态HTML表而无需从头编写代码。

此示例演示对服务器的AJAX调用，该调用返回表示该表的JSON响应。我相信JSON是数据传输的更好选择，因为它可以在客户端将您的内容保存在它所属的位置。它还使您的服务器端代码更具可重用性，因为其他客户端应用程序可以使用该数据并以客户端选择的任何格式呈现它，无论是HTML，XML，JSON还是其他格式。

http://www.datatables.net/examples/data_sources/server_side.html

还有一个向现有表添加行的示例，无需重新加载页面。在此示例中，该行作为JSON数组传递到API。如果您在响应中返回多行数据，则可以轻松修改此示例以获取一系列数组。

主要的好处是有第三方库将服务器端对象转换为JSON，DataTables当然会将其转换为HTML，从而无需对HTML生成策略中的错误进行故障排除。 / p>

http://www.datatables.net/examples/api/add_row.html

最后，您的网页设计人员会感谢您将HTML保存在客户端可以轻松访问的位置，而不是隐藏在某些服务器端功能中，这些功能被他们可能熟悉或不熟悉的代码所包围

Answer 3

最有效的选择是在服务器上生成HTML，然后将其直接设置为innerHTML。

Answer 4

我认为这与你将要获得的一样好：

var arrayObject = $.parseJSON(data);
var htmlToShow = $.map(arrayObject,function(o){
  return '<tr><td>' + o[0] + '</td><td>' + o[1] + '</td></tr>';
}).join('');
$('#tableResults').html(htmlToShow);

使用+ =逐步构建所有中间字符串不是一个好主意。然而，使用html()设置一个大的HTML（就像你做的那样）是一个好主意。

如果您需要向现有表添加其他行，请注意将多个tbody元素添加到同一个表中是合法的。执行此操作，然后如上所述设置新tbody en mass 的html()。

编辑：嗯，我修改了我的答案。如果你真的想要从脚本中获得最后一点性能，那就不要使用jQuery。请勿使用map，请勿使用each。编写自己的for循环，将一个数组映射到一个字符串数组，加入它们，然后直接设置innerHTML。但我认为你会发现这样做可以节省性能，不值得额外的工作，测试或可能的脆弱。

Answer 5

您可以尝试将数据显示为分页数据。通过这种方式，您只需要一次显示所有数据的一部分。这是因为很少有人可以在网站中滚动查看所有10.000个数据行。

例如，你可能有这样的函数：getPaginatedData（offset，max，condition）。

在那里，你得到的数据符合条件，它应该得到的最大行，以及你开始的数据行的偏移量。

例如：您可以从表CUSTOMER获取10000个数据行。如果查看者位于第x页，您可以从10000个客户中获得100个客户（按名称排序），从位置x开始，然后在客户端构建html。我相信这种方法（如果它符合您的需求）比在服务器端构建HTML更有效，这会增加流量和服务器端的复杂性。

Answer 6

您可以尝试：

$(htmlToShow).appendTo('#tableResults');

jquery添加表行效率

6 个答案: