在客户端筛选大型列表

Question

我在尝试使用文本键入过滤大量表格数据。

在过去，我用更小的清单工作和使用的解决方案，如以下

http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/

和

http://papermashup.com/jquery-list-filtering/

有了这些，你通过与内容列表迭代您的过滤器，并根据是否显示来切换各个显示器。

我试图做到这一点的过滤，而无需使用任何额外的插件（除了任何涉及与jQuery）

我也试图让所有的过滤在客户端。

这里是我的标记

<div> 
    <table> 
    <tbody> 
     <tr class="mm-list-control-item" data-code="WHLO-AM"> 
      <td> WHLO-AM </td> 
      <td>Rubber City</td> 
      <td>Classic Hits</td> 
     </tr>   
     <tr class="mm-list-control-item" data-code="WHLO-AM"> 
      <td> WHLO-AM </td> 
      <td>Rubber City</td> 
      <td>Classic Hits</td> 
     </tr> 
     <tr class="mm-list-control-item" data-code="WKDD-FM"> 
      <td> WKDD-FM </td> 
      <td>Rubber City</td> 
      <td>Classic Hits</td> 
     </tr> 
     <tr class="mm-list-control-item" data-code="WNIR-FM"> 
      <td> WNIR-FM </td> 
      <td>Rubber City</td> 
      <td>Classic Hits</td> 
     </tr> 
    <tbody> 
    <table> 
</div> 

我过滤掉数据代码的内容。我的清单大小也大约是2000件（tr）。

更新：我收到了反对票，让我澄清。我不寻找大量的代码。我只是需要一些想法，如果有更好的方法来构建这个过滤器，除非我正在做这件事。

Answer 1

我将分享一路上我

1）拿起见解避免DOM操作

这是一个你会经常听到的规则，它在这个例子中环也是如此。你可以在小的情况下操纵dom，但是如果你没有写得很好的html，它会很快变得更加昂贵，甚至更昂贵，因为你将不得不解析和html元素来尝试找到并操纵确切的你想要的东西。

2）如果你决定操作DOM如此有效。

在使用jquery一段时间后，您会意识到jQuery的工作方式会对您的系统造成负担。

下面是我所说的例子： http://jsperf.com/jquery-children-vs-findall

如果您正在运行与速度问题，请确保你的方式，尽可能

解决方案作为高效使用jQuery：

建立包含过滤器项目的列表。

我能够像我最初设想的那样保持客户端的一切。我通过js生成动态html，所以我已经有了建立我的列表的机制。我只需要添加一个新的方法，接受过滤器变量并告诉我的对象我要过滤掉哪些列。

结论：

我知道我没有给实际的代码更加的一些指导原则和排序的最佳实践，它更多的是维基那么QA的，但如果我会遇到这样它可能有救了我在我的搜索过程中搜索最好的方法来过滤客户端的大型列表。

Answer 2

你可以考虑过滤页面刷新（服务器端）列表？

我认为不建议在一页中显示2k行。
其实只是从服务器加载2k行已经太多我认为。
如果你需要滚动你可以分页与ajax例如。
但是用ajax进行分页/过滤并不像看起来那么容易。