jQuery DataTables: hide search bar

Question

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.

Possible duplicate of How can I remove the search bar and footer added by the jQuery DataTables plugin? — Tushar Walzade
– Tushar Walzade, Commented Dec 21, 2018 at 13:04
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
– user10805743, Commented Dec 21, 2018 at 13:08

Fuzzybear · Accepted Answer · 2025-05-24 22:45:46Z

42

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.

edited May 24 at 22:45

Fuzzybear

1,4212 gold badges28 silver badges44 bronze badges

answered Dec 21, 2018 at 13:03

user3307073

Sign up to request clarification or add additional context in comments.

2 Comments

user10805743 Over a year ago

Perfect. That's exactly what I've been looking for. Thanks. Updated my fiddle according to your suggestion.

Oliver Schimmer Over a year ago

Thanks so much. To do this via HTML data attributes, simly add data-s-dom="lrtip" to the <table> tag.

Elikill58 · Accepted Answer · 2024-05-24 12:33:59Z

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

edited May 24, 2024 at 12:33

Elikill58

5,04527 gold badges33 silver badges65 bronze badges

answered Dec 21, 2018 at 13:11

Alok Singh

6604 silver badges14 bronze badges

Comments

Elikill58 · Accepted Answer · 2024-05-24 12:32:09Z

2

This worked for me:

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

edited May 24, 2024 at 12:32

Elikill58

5,04527 gold badges33 silver badges65 bronze badges

answered Jun 2, 2020 at 10:10

Kabubless

1292 silver badges2 bronze badges

Comments

Tushar Walzade · Accepted Answer · 2018-12-21 13:25:19Z

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>

Elikill58 · Accepted Answer · 2024-05-24 12:31:54Z

1

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

edited May 24, 2024 at 12:31

Elikill58

5,04527 gold badges33 silver badges65 bronze badges

answered Mar 8, 2023 at 3:00

Abdallah Mustapha

211 bronze badge

Collectives™ on Stack Overflow

jQuery DataTables: hide search bar

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related