过滤包含大数据的html表（超过12K行）答案

【问题标题】：Filter html table containing large data (More than 12K row)过滤包含大数据的html表（超过12K行）
【发布时间】：2013-11-28 23:57:45
【问题描述】：

我正在开发包含网站列表的小项目（最多添加 12000 个名称），我要求用户选择他们感兴趣的，因为我在 js fiddle 上创建了一段代码：fiddle

$(document).ready(function () {
    $("#title").keyup(function () {
        if ($(this).val() != "") {
            $("#doc_list_content tbody>tr").hide();
            $("#doc_list_content td:contains-ci('" + $(this).val() + "')").parent("tr").show();
        } else {
            $("#doc_list_content tbody>tr").show();
        }
    });
});
$.extend($.expr[":"], {
    "contains-ci": function (elem, i, match, array) {
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

代码在少量数据下工作正常，但是当它用于 12000 行时，会导致浏览器无响应错误。

我尝试搜索并使用我的代码进行了很多操作。我想要与 js 或 php 相同类型的功能（在 js fiddle 上）（对它的一点了解）

我的问题是：

1> 使用这种排序方式可行吗？ 2> 任何 js/jquery 解决方案？ 3> 我知道一点 php 作为服务器端脚本，它可以帮助解决问题。

谢谢。

【问题讨论】：

搜索数据数组，而不是 DOM。 12K 行的表从何而来？
数据在mysql表中，页面加载时加载

标签： javascript php jquery html-table

【解决方案1】：

1 不要为此使用 jquery ......它很慢。使用纯javascript

2 创建一个包含表的数组

var tbl=[
 [a1,b1,c1,d1],
 [a2,b2,c2,d2],
]

3 使用while-- 循环，因为它是最快的

var l=tbl.length
while(l--){
}

4 使用非常少的速记或按位检查，因为它们更快。

var l=tbl.length
while(l--){
 !tbl[l][0]||(SOMETOGGLEFUNCTION(l))//l is the index of the real table 
}

这是我知道检查快速 12k 记录的唯一方法。

【讨论】：

【解决方案2】：

如果是我，我基本上会使用某种“分页”来将用户对数据的“查看”限制为较小的数据块，但也许仍然允许某种“搜索”功能来搜索/过滤所有数据（不仅仅是可见块） - 我猜是通过一个数组。

在过去的项目中，我发现为了速度/性能，最好在用户第一次向下滚动到当前数据块的“底部”时将对象增量添加到 DOM，然后我会添加一个新块并删除前一个块......有点像用户如何根据他们在书中的位置来翻书的页面，而不是把一本书的所有单独页面放在他们面前的地板上——也许不是最好的类比，但希望你能遵循我的想法。祝你好运。

【讨论】：