0

我正在使用在http://datatables.net/api找到的 Jquery 数据表插件。该插件会生成自己的搜索框，如果启用，它会在初始化时将其插入页面。创建搜索框时，它会嵌套在自己的 div 中，如下所示：

<div>
    <!-- search code -->
</div>
<table>
    <!-- table data -->
</table>

我想在不移动搜索框的情况下在表格上有一个滚动条，以便它始终可见。溢出-y：滚动；在表格元素上似乎对我不起作用，但在 div 上起作用。那正确吗？如果我将样式应用于父容器，则如果用户向下滚动，则搜索框不可见。我尝试自己将元素物理移动到所需的设置，即：

<div>
    <!-- Search Code -->
</div>
<div style="overflow-y:scroll;"> <!-- actually in a class but this shows what it is. -->
    <table>
        <!-- table data -->
    </table>
</div>

正如所料，这会破坏插件生成的搜索框。所以我的问题是，我是否可以使用插件的内置搜索功能来达到预期的结果，也许以某种方式使用像“sdom”这样的参数，还是我需要硬着头皮推出自己的搜索/过滤功能？

4

1 回答 1

0

我找到的解决方案只是关闭内置过滤器并编写我自己的等效项，我可以将其放置在我喜欢的任何地方。

http://jsfiddle.net/KwXby/5/

$(document).ready(function(){
  $("#tableFilter").bind("change keyup", function(){
  var tableRows = $('.dataTable:visible').find('tbody').find('tr');
  var filterText = $(this).val();
  $(tableRows).each(function() {
    if ($(this).text().indexOf(filterText ) >= 0) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
  });
});

编辑：我后来发现我需要能够使用空格分隔的搜索词搜索多个列，如果没有找到，则提供一个空表行，这需要更新。

http://jsfiddle.net/KwXby/11/

于 2013-09-27T09:13:29.007 回答