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

任何幫助深表感謝。

Answer 1

您需要相應地調整 DataTable 的 sDom 屬性： let table = $('#mytable').DataTable({sDom: 'lrtip'}); 這應該隱藏搜索框而不禁用過濾功能。 另外，您可能想查看有關該主題的官方參考文檔。

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'
        } );

Answer 3

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

這對我有用

Answer 4

只需在您的 css 中添加此類 - .dataTables_filter, .dataTables_info { display: none; } .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>