Question

我正在使用jquery数据表。我的要求是删除默认搜索框并在差异位置添加自定义搜索框。我使用bFilter:false删除了搜索输入，但它也禁用了搜索过滤功能。任何想法如何修复它而不使用css fiddle

$(document).ready(function(){    
   var table= $('#example').DataTable({
        paging:false,
        bFilter:false,
        ordering:false
    });

    $('#search-inp').keyup(function(){
      table.search($(this).val()).draw() ;
})

});

Answer 1

您可以使用dom选项隐藏搜索输入，而不会禁用搜索功能。如果要提供自己的搜索输入（可能是逐列或全局），这非常有用。它还完成了您最初要求的内容 - 在不使用CSS的情况下删除原始搜索输入。

以下是文档：https://datatables.net/examples/basic_init/dom.html

当然还有一个例子：

var table = $('#example').DataTable({
        paging: false,
        bFilter: false,
        ordering: false,
        searching: true,
        dom: 't'         // This shows just the table
    });

您还可以使用此方法在其他位置呈现搜索输入。根据您需要呈现输入的位置，您可以完全避免使用自定义输入。

Answer 2

用于隐藏数据表AS的默认搜索输入框：
默认情况下，sDom =“lftipr”;

对数据表执行这些操作
      'l' - 长度变化
      'f' - 过滤输入
      't' - 桌子！
      '我' - 信息
      'p' - 分页
      'r' - pRocessing
  要删除默认搜索框，只需从sDom中删除f字符   像：

$（ '＃表'）。数据表（{ “sDom”： “ltipr” }）;

希望这必须有效

Answer 3

bFilter实际上删除了搜索功能，因此我建议它只是隐藏默认搜索，然后您可以使用已编写的代码实现自定义搜索。请查看以下代码：

#example_filter //#example is your table id, so you can replace it with whatever Id you give to table
{
    display:none;
}

注意：在初始化期间删除bFilter

然后你的正常编码。这是 DEMO

Answer 4

正如Guruprasad所说，'bfilter'：false会删除搜索功能。所以你需要使用'dom'选项。

dom还带有标记和样式功能。因此，如果您需要精确的数据表样式，那么您应该使用

$（'＃example'）。dataTable（{dom： “＆LT; “行” LR＆GT;＆LT; “行” ＆LT; “COL-XS-12” T＆GT;＆GT;＆LT; “行” ＆LT; “COL-SM-6” I＆GT;＆LT;“COL-SM-6 “p为H.＆GT;'}）;

删除默认搜索框并在jquery数据表中添加自定义搜索框

4 个答案: