筛选包含大数据的html表(超过12K行）

Filter html table containing large data (More than 12K row)

本文关键字：超过 12K 包含大 数据 html 筛选      更新时间：2023-11-23

我正在做一个包含网站列表的小项目（最多添加了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作为服务器端脚本，它能帮助解决问题吗。

谢谢。

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记录的唯一方法。

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

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

相关文章：