15

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.

I have put up jsfiddle

My 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>

and jQuery code:

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

Any help is much appreciated.

user10805743
  • 183
  • 1
  • 1
  • 7
  • Possible duplicate of [How can I remove the search bar and footer added by the jQuery DataTables plugin?](https://stackoverflow.com/questions/1920600/how-can-i-remove-the-search-bar-and-footer-added-by-the-jquery-datatables-plugin) – Tushar Walzade Dec 21 '18 at 13:04
  • 1
    I have mentioned in my post, that provided solution doesn't work for me because, it disables filtering not only with search bar, but with table bottom search boxes either, which I would like to keep. – user10805743 Dec 21 '18 at 13:08

5 Answers5

41

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.

11

Data table provides customization options to show and hide elements and also custom elements. We can use dom values to customize:

 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
  • 640
  • 4
  • 14
2
let table = $('#mytable').DataTable({sDom: 'lrtip'});

this worked for me

Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
Blessing Tatenda Kabungaidze
  • 121
  • 2
  • 2
1

Simply add this class in your css - .dataTables_filter, .dataTables_info { display: none; }

The live instance -

$(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
  • 3,737
  • 4
  • 33
  • 56
0

If you are using DataTable from https://l-lin.github.io/angular-datatables/ , inside ngOnInit(), you can set the Searching prop to false inside this.dtOptions.

Like this:

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


then you set, searching: false
       }
}
Abdallah Mustapha
  • 11
  • 1