Javascript jQuery中的重建元素与mass显示/隐藏

我有一个分页的数据表，我想缓存客户端数据，我正试图找出如何最有效地切换页面

这样做是否更好：

A.通过对DOM的一次修改来重建和替换表

var pageLength = 50;
var cache; //array of some objects from database

function changePage(index) {
    var $table = $("<table>");
    $.each(cache, function (i, row) {
        var $tr = $("<tr>");
        if (i < index || i > index + pageLength) $tr.hide();
        $tr.append($("<td>", { text: row.ID }));
        $tr.append($("<td>", { text: row.Name }));
        $table.append($tr);
    });
    $("#targetDiv").html($table);
}

function changePage(index) {
    var $table = $("#targetDiv table");
    $table.find("tr:visible").hide();
    $table.find("tr").each(function (i, row) {
        if (i > index && i < index + pageLength) $tr.show();
    });
}

var pageLength=50；
var缓存//数据库中某些对象的数组
函数更改页（索引）{
var$table=$（“”）；
$.each（缓存、函数（i、行）{
var$tr=$（“”）；
如果（iindex+pageLength）$tr.hide（）；
$tr.append（$（“”，{text:row.ID}））；
$tr.append（$（“”，{text:row.Name}））；
$table.append（$tr）；
});
$（“#targetDiv”）.html（$table）；
}

或

B.插入DOM后显示和隐藏行

var pageLength = 50;
var cache; //array of some objects from database

function changePage(index) {
    var $table = $("<table>");
    $.each(cache, function (i, row) {
        var $tr = $("<tr>");
        if (i < index || i > index + pageLength) $tr.hide();
        $tr.append($("<td>", { text: row.ID }));
        $tr.append($("<td>", { text: row.Name }));
        $table.append($tr);
    });
    $("#targetDiv").html($table);
}

function changePage(index) {
    var $table = $("#targetDiv table");
    $table.find("tr:visible").hide();
    $table.find("tr").each(function (i, row) {
        if (i > index && i < index + pageLength) $tr.show();
    });
}

功能更改页（索引）{
var$table=$（“#targetDiv table”）；
$table.find（“tr:visible”）.hide（）；
$table.find（“tr”）。每个（函数（i，行）{
如果（i>index&&i

---

我按照第一条写了一些东西，并在Chrome vs IE8中运行，发现IE的速度明显较慢，而Chrome没有问题。不幸的是，我们的标准仍然是IE7，因此我正在尝试优化IE7中的JS引擎，以防在性能方面比IE8差。

我将两者结合使用

加载时，您将显示第一页（其中包含存储在某处的完整列表的引用）

当请求第二页时，您将使用第二页数据填充它并隐藏第一页

当第二页再次被请求时，它将已经被填充，因此它将是一个隐藏/显示功能

这最好由一个类来处理，该类知道哪个页面是当前页面，可能有多少页面，等等。然后，当您可以执行一些智能内存管理时，您可以清空与当前页面相距一定数量的页面

但我建议使用现有的解决方案

有许多客户端分页插件，特别是jQuery

• 是我过去使用过的东西，虽然一开始有点困难，但它具有高度的可扩展性
• 这是谷歌引导我去的一个网站

---

我会使用现有的解决方案，而不是在这里重新发明轮子。

您希望表中同时有多少个对象？或者更好地说，单个表中预期的最大对象数是多少？可能会有所不同，我正在处理的示例是，显示和隐藏总是比DOM插入快，但是如果有很多HTML，每次更新DOM有时是减少初始页面加载时间的更好主意，所以这取决于什么？使用文档片段和简单的JS将大大加快第一个函数的速度。这是一种情况，在某种程度上，一个更好，另一个更好。我会选择replace，因为它处理较大数据集的速度和处理较小数据集的速度一样快。尽管如此，我还是建议不要在所有行中循环寻找索引y-z，而是在y-z中循环。在服务器端缓存数据并通过向客户端获取较小的数据集进行分页是否更好？谢谢！我以前听说过数据表，但我从未真正研究过它。它在IE和Chrome中的表现都非常出色。