1

我有一个分页的数据表，我想在客户端缓存它，我试图弄清楚如何最有效地切换页面。

这样做会更好：

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);
}

或者

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

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();
    });
}

我按照第一个的思路写了一些东西，并在 Chrome vs IE8 中运行它，发现 IE 明显慢了很多，而 Chrome 没有问题。不幸的是，我们的标准仍然是 IE7，所以我正在尝试优化 IE7 中的 JS 引擎在性能方面比 IE8 更差的情况。

4

1 回答 1

0

我会做两者的结合。

在加载时，您将显示第一页（参考存储在某处的完整列表）。

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

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

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

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

有许多客户端分页插件，尤其是对于 jQuery。

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

于 2013-03-20T20:19:50.153 回答