Question

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

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

我希望桌面上有一个滚动条而不移动搜索框，因此它始终可见。溢出-Y：滚动;在table元素上似乎不适合我，但在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'这样的参数，或者我是否需要咬住子弹并滚动我自己的搜索/过滤器功能？

Answer 1

我找到的解决方案只是关闭内置过滤器并编写我自己可以放置的地方。

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/

是否可以自定义Jquery Data Table默认生成的dom结构？

1 个答案: