我如何能有效地呈现10000个记录列表在单一的html文件

How can i present efficiently 10000 record list in single html file

本文关键字：列表 单一 文件 html 记录 10000个 何能 有效地      更新时间：2023-09-26

我有一个html文件，其中包含需要在单个html文件中的10000个列表项按类别排序，例如按ABC排序，并不是所有的都需要显示。
每次只有500(所以其他的都隐藏了)。
有什么方法可以有效地重新排列列表呢?
Java脚本?css呢?

你可以用它来排序你的列表:

var list = document.getElementById("myList");
var listItems = [].map.call(list.getElementsByTagName("li"), function(item) {
    return { text: text(item), element: item };
});
function sortList() {
    var frag = document.createDocumentFragment();
    listItems = listItems.sort(function(a, b) {
        return a.text < b.text ? -1 : b.text < a.text ? 1 : 0;
    });
    listItems.forEach(function (item) {
        frag.appendChild(item.element);
    });
    list.innerHTML = "";
    list.appendChild(frag);
}
function text(el) {
    var s = el.innerText;
    if (!s && s != "") {
        s = el.textContent || "";
    }
    return s.toLowerCase();
}

工作演示:http://jsfiddle.net/4bm57/6/

过滤列表:

function filterList() {
    var frag = document.createDocumentFragment();
    listItems.forEach(function (item) {
        if ([filter criteria code here]) {
            frag.appendChild(item.element);
        }
    });
    list.innerHTML = "";
    list.appendChild(frag);
}

这段代码使用了一些旧浏览器中不可用的Array方法。要使此代码在IE8或更早版本中工作，请参阅Array.map()和Array.forEach()的兼容性部分。

带分页的数据表是可行的。

下面的例子是一个JSF组件，但我认为它已经足够让你了解这个概念了。

示例: 处理大数据的数据表

我建议你看看KnockoutJs。它有你想要的所有功能。

  1. 设计用于处理客户端的大量数据。
  2. 通过使用不同的模板来显示数据，您可以轻松地动态创建完全不同格式的网格。参见http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html。
  3. 您可以轻松实现实时搜索。参见http://jsfiddle.net/rniemeyer/cCBqJ/。使用这个示例，您还可以实现自定义过滤，只显示感兴趣的数据。
  4. 你可以实现任何你想要的动态排序。请参阅http://jsfiddle.net/rniemeyer/93Z8N/获取一个简单的示例。您还可以将过滤器的输出链接到sort例程中。
  5. 您可以通过在排序函数之后链接分页过滤器轻松实现分页。

所以你可以很容易地切片和切片，并显示任何你想要的数据。

缺点是目前还没有一个开源项目支持带有排序、过滤和客户端分页的通用网格。有各种不同的部分实现。最好的信息在http://www.knockmeout.net/和https://groups.google.com/forum/#!forum/knockoutjs。

我目前在我当前的项目中使用上述所有功能。knockoutj确实有一个学习曲线。但是我发现这是最好的数据展示方式

相关文章：