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

Question

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

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

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

});

Answer 1

用于隐藏数据表AS的默认搜索输入框:
默认情况下,sDom ="lftipr";

对数据表
'l' 执行这些操作- 长度更改
'f' - 过滤输入
't' - 表格!
'i' - 信息
'p' - 分页
'r' - pRocessing
要删除默认搜索框,只需从sDom中删除f字符即可.
喜欢:

$('#table').DataTable({"sDom":"ltipr"});

希望这一定能奏效

Answer 2

您可以使用该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 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