javascript - 如何使用纯 Javascript 过滤非常大的 Bootstrap 表

Question

我在 bootstrap 中构建了一个大表，大约 5,000 行 x 10 列，我需要仅使用 JavaScript 快速过滤特定属性的表。该表同时具有 id 列和属性列，即

id | attr | ...
---------------
2  |  X   | ...
3  |  Y   | ...
4  |  X   | ...

为了加快过滤过程，我构建了一个哈希表，将属性映射回列 ID。例如，我有一个映射:

getRowIds["X"] = [2,4]

用户可以在搜索框中输入属性“X”，哈希表然后查找包含“X”的对应行(在本例中为 2 和 4)，然后通过 map 操作调用以下函数:

this.hideRow = function(id) {
    document.getElementById(id).style.display="none"
}

this.showRow = function(id) {
    document.getElementById(id).style.display=""
}

这个过程仍然很慢，因为允许用户选择多个属性(比如 X、Y)。

有没有更快的隐藏行的方法？

如果我能以某种方式将表格与 DOM 分离，进行更改，然后重新附加，是否会更快？我如何在 JavaScript 中执行此操作？

还有其他更有效/更智能的过滤方法吗？

谢谢:)

Answer 1

我会问

• 为什么要为自己编写这段代码？根据个人经验，尝试在所有浏览器上进行有效过滤是一项艰巨的任务。
• 如果您将此作为一种学习体验，请查看下面列出的包的源代码作为示例。
• 对于 5000 行，进行服务器端过滤和排序会更有效。然后使用 ajax 更新显示的表格。

我建议您考虑使用已经执行此操作的几个 JavaScript 包之一。除了下面的两个之外，还有更多的软件包。我将这两个展示为可用的示例。

• http://datatables.net/ - 这是一个功能非常全面的包，可以处理客户端和服务器端的过滤和排序。
• http://www.listjs.com/ - 是一个轻量级的客户端过滤和排序包。