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

---

可能是如何删除jQuery DataTables插件添加的搜索栏和页脚？的重复问题。 - Tushar Walzade

我在我的帖子中提到，所提供的解决方案对我不起作用，因为它不仅禁用了搜索栏的过滤功能，还禁用了表底部的搜索框，而我想保留这些功能。 - user10805743

Answer 1

你需要根据自己的需求调整DataTable的sDom属性： let table = $('#mytable').DataTable({sDom: 'lrtip'}); 这样可以隐藏搜索框，而不会影响筛选功能。 同时，你可能想查看官方文档以了解更多相关信息。

- user3307073

---

太好了，这正是我一直在寻找的。谢谢。根据您的建议更新了我的代码片段。 - user10805743

非常感谢。 要通过HTML数据属性完成此操作，只需将data-s-dom="lrtip"添加到<table>标记中即可。 - Oliver Schimmer

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

Answer 3

let table = $('#mytable').DataTable({sDom: 'lrtip'});

这对我有用

- Blessing Tatenda Kabungaidze

Answer 4

只需在您的CSS中添加此类 - .dataTables_filter，.dataTables_info { display: none; }

实时实例 -

$(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();
    });
});

.dataTables_filter, .dataTables_info { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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>

- Tushar Walzade

Answer 5

如果您正在使用来自https://l-lin.github.io/angular-datatables/的DataTable，在ngOnInit()中，您可以在this.dtOptions.内将Searching属性设置为false。

像这样：

ngOnInit(): void {
    this.dtOptions = {
ajax: or httpClient,


then you set, searching: false
       }
}

- Abdallah Mustapha