jQuery DataTables：隐藏搜索栏

Question

我似乎无法隐藏 DataTables 默认搜索栏。到目前为止，我已经尝试过 这个 线程的解决方案，但是设置 bFilter:false 完全禁用过滤，所以我在页脚中的搜索框不再起作用。

我已经提出了 jsfiddle

我的 HTML：

 <thead>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</thead>
<tbody>
    <table id="mytable">
        <thead>
            <tr>
                <th>name</th>
                <th>type</th>
                <th>color</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>apple</td>
                <td>fruit</td>
                <td>red</td>
            </tr>
            <tr>
                <td>banana</td>
                <td>fruit</td>
                <td>yellow</td>
            </tr>
            <tr>
                <td>carrot</td>
                <td>vegie</td>
                <td>red</td>
            </tr>
            <tr>
                <td>potato</td>
                <td>vegie</td>
                <td>brown</td>
            </tr>
        </tbody>
    </table>
</tbody>

和 jQuery 代码：

 $(document).ready(function(){
    let table = $('#mytable').DataTable();
  $('#mytable tfoot th').each( function (i) {
        let title = $('#mytable thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
    } );
  $( table.table().container() ).on( 'keyup', 'tfoot input', function () {
    table
      .column( $(this).data('index') )
      .search( this.value )
      .draw();
  } );
});

任何帮助深表感谢。

原文由 user10805743 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要相应地调整 DataTable 的 sDom 属性： let table = $('#mytable').DataTable({sDom: 'lrtip'}); 这应该在不禁用过滤功能的情况下隐藏搜索框。另外，您可能想查看有关该主题的 官方参考 文档。

原文由 user3307073 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

数据表提供自定义选项来显示和隐藏元素以及自定义元素。我们可以使用 dom 值来自定义：

  l - length changing input control
    **f - filtering input**
    t - The table
    i - Table information summary
    p - pagination control
    r - processing display element

    **f is for filter , so we can remove it.**

        $('#example').dataTable( {
          "dom": 'lrtip'
        } );

原文由 Alok Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议