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

您是否可以考虑使用页面刷新（服务器端）过滤列表？

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

Answer 2

我将分享我沿途选择的见解

1）避免dom操纵

这是一个你会经常听到的规则，在这个例子中也是如此。你可以在小实例中逃脱操作dom，但是如果你没有很好的书面html，它就会很快变得昂贵，甚至更昂贵，因为你必须解析和html元素来尝试找到并操纵你想要的确切内容。

2）如果你决定操纵dom这样做有效。

使用jquery一段时间之后，你会发现jquery的工作方式对你的系统造成了负担。

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

如果遇到速度问题，请确保以尽可能高效的方式使用jquery

解决方案：

使用包含的过滤器项构建列表。

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

结论：

我知道我没有给出实际代码更多的一些指南和排序的最佳实践，而且它更像是一个wiki然后是QA，但是如果我想遇到这个，它可能在我寻找最好的时候节省了我几个小时在客户端过滤大型列表的方法。

在客户端筛选大型列表

2 个答案: