jQuery DataTables:隐藏搜索栏 [英] jQuery DataTables: hide search bar

问题描述

我似乎无法隐藏DataTables的默认搜索栏.到目前为止，我已经尝试过

I seem not able to hide DataTables default search bar. So far, I have tried solution from this thread, but setting bFilter:false disables filtering entirely, so my search boxes in the footer simply do not work any longer.

我已经提出 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();
  } );
});

非常感谢您的帮助.

推荐答案

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

You need to adjust sDom attribute of your DataTable accordingly: let table = $('#mytable').DataTable({sDom: 'lrtip'}); That's supposed to hide search box without disabling filtering feature. Also, you might want to check out official reference doc regarding the subject.

这篇关于jQuery DataTables:隐藏搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！