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

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

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 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

用于隐藏数据表AS的默认搜索输入框：
默认 sDom="lftipr";

Perform these operations on datatables
'l' - Length changing
'f' - Filtering input
't' - The table!
'i' - Information
'p' - Pagination
'r' - pRocessing
For removing default search box just remove the f character from sDom.

喜欢：

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

希望一定有用

Answer 4

正如 Guruprasad 提到的，'bfilter': false 删除了搜索功能。所以你需要使用 'dom' 选项。

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

$('#example').dataTable( {dom: '<"row"lr><"row"<"col-xs-12"t>><"row"<"col-sm-6"i><"col-sm-6"p>>'});

Answer 5

只需将此添加到您的 css
.dataTables_filter { 显示：none;}

它将隐藏默认搜索框，您可以使用自己的搜索框，不需要 bfilter : false

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

remove default search box and add custom one in jquery datatable

datatable

jquery