jQuery DataTables：隐藏搜索栏

Posted 2023-05-07

【中文标题】jQuery DataTables：隐藏搜索栏

【英文标题】：jQuery DataTables: hide search bar

【发布时间】：2019-05-21 22:52:37

【问题描述】：

我似乎无法隐藏 DataTables 的默认搜索栏。到目前为止，我已经尝试了来自this 线程的解决方案，但是设置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();
   );
);

非常感谢任何帮助。

【问题讨论】：

How can I remove the search bar and footer added by the jQuery DataTables plugin?的可能重复

我在我的帖子中提到过，提供的解决方案对我不起作用，因为它不仅会禁用搜索栏过滤，还会禁用桌面搜索框的过滤，我想保留它。

【参考方案1】：

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

【讨论】：

完美。这正是我一直在寻找的。谢谢。根据您的建议更新了我的小提琴。

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

【参考方案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'
         );

【参考方案3】：

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

这对我有用

【参考方案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>