过滤包含大数据的html表(超过12K行)

时间:2013-11-28 15:47:24

标签: javascript php jquery html-table

我正在开发包含网站列表的小项目(Max添加了12000名), 我要求用户选择他们感兴趣的我创建的代码片段,如js小提琴: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小提琴上)

我的问题是:

1>使用这种类型的排序是否可行? 2 - ;任何js / jquery解决方案? 3 GT;我知道一点点php作为服务器端脚本,它可以帮助解决问题。

感谢。

2 个答案:

答案 0 :(得分:1)

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

在过去的项目中我发现,对于速度/性能,当用户第一次向下滚动到当前数据块的“底部”时,最好逐步向DOM添加对象,然后我会添加一个新的块并删除以前的块...等待用户如何根据书中的位置来翻书的页面,而不是将书的所有单个页面放在他们面前的地板上 - 也许不是最好的比喻,但希望你按照我的想法。祝你好运。

答案 1 :(得分: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记录的唯一方法。