使用 JQuery 将数千行动态加载到表中答案

【问题标题】：Use JQuery to dynamically load thousands of rows into table使用 JQuery 将数千行动态加载到表中
【发布时间】：2017-01-02 10:19:38
【问题描述】：

我正在为 CRM 开发面向前端的 GUI。我们有一个分层的客户结构。每个客户都有许多要开具账单的地址、许多收货地址，以及与每个帐户关联的许多联系人。我遇到的问题是一些客户有超过 10,000 个与该帐户相关联的收货人。当一次调用所有这些时，这成为一个问题。我的后端很好，它可以在大约 280 毫秒（平均）内获取所有发货数据。我正在使用 Javascript 将所有信息加载到表中。这是我目前正在做的事情：

    var r = new Array();
var j = -1, recordID;
r[++j] = '';

    //Loop through the data and build an array.
    for (i in data) {
        var d = data[i];
            recordID = d.id;
        r[++j] = '<tr>';
        r[++j] = '<td>'+ d['ADDRESS_LINE_1'] +'</td>';
        r[++j] = '</tr>';
    }
    //The line below joins the array and appends it to the table.
    $('#table').append(r.join(''));

我已经与为我构建规范的人进行了交谈，他们需要一次性展示所有这些，没有过滤的可能性。现在，在加载所有数据并打开模式之前大约需要 4 秒。

有没有更快的方法来做到这一点？

【问题讨论】：

不可能一次显示所有行，除非它们的屏幕很大。只需在滚动上加载更多。如果屏幕上只有 100 条记录，则不要渲染 10K 条记录。
看看DataTables datatables.net
那么是数据加载太慢的问题吗？
@Brian OP 也应该看看datatables.net/examples/ajax/defer_render.html 如果你不热衷于使用数据表，你需要想出自己的机制来一次加载少量数据，并带有分页系统.数据表已经为您完成了。然而，解决这个问题的方法很简单，即加载 50 条数据。用户请求更多，再加载 50 个。
这里有一些优点。 Datatables 是我的第一个方法，但它太慢了，我会看看 defer_render。有没有办法可以将数据保存为数组，并调用数组值#0-50，当滚动到#51时，加载#50-100？如果这是可能的，那将是理想的。

标签： javascript php jquery oracle datatables

【解决方案1】：

$.map(yourArrayVar, function(value, key) {
   return '<TR><TD>'+value['ADDRESS_LINE_1']+'</TD></TR>';
});
$("#table").append(yourArrayVar.join(''));

这可以帮助您获得比循环更好的性能。在这里了解更多信息，http://api.jquery.com/jquery.map/

【讨论】：

OP 仍在一次创建数千个 dom 元素。