How can I remove the search bar and footer added by the jQuery DataTables plugin?

Question

I want to remove the search bar and footer (showing how many rows there are visible) that is added to the table by default. I just want to use this plugin for sorting, basically. Can this be done?

You could efficiently use `sDom` as described here - https://stackoverflow.com/a/53885264/5729813 — Tushar Walzade, Dec 21 '18 at 13:34

antpaw · Accepted Answer · 2023-03-09T08:02:30.777

662

For DataTables >=1.10, use:

$('table').dataTable({searching: false, paging: false, info: false});

If you still want to be able to use the .search() function of this plugin, you will need to hide the search bar's html with the dom setting:

$('table').dataTable({dom: 'lrt'});

The defaults are lfrtip or <"H"lfr>t<"F"ip> (when jQueryUI is true), f char represents the filter (search) html in the dom, ip for the info and pagination (footer).

For DataTables <1.10, use:

$('table').dataTable({bFilter: false, bInfo: false});

or using pure CSS:

.dataTables_filter, .dataTables_info { display: none; }

edited Mar 09 '23 at 08:02

answered Dec 17 '09 at 09:59

antpaw

15,444
11
59
88

7

As good as @antpaw comment is, and seems to work in most cases, it doesn't work if there is filtering going on for each column, like in this example :http://datatables.net/release-datatables/extras/FixedColumns/col_filter.html . Be aware! – Janis Peisenieks Apr 17 '13 at 10:45
@JanisPeisenieks The example URL is broken: https://www.datatables.net/extensions/fixedcolumns/ – antpaw Jul 30 '15 at 14:00
15

I don't understand why this is accepted, since it doesn't answer the question. The problem was removing the search bar and the footer, not disabling searching entirely. – user1563544 Apr 24 '18 at 07:57
1

to completely remove footer you have to set `paging:false` and `info:false` , not just `paging:false` – Mike D3ViD Tyson Jul 24 '18 at 13:53
1

adding to @user1563544's comment, is there any way to just hide the search bar and NOT disabling the functionality? (other than CSS tricks?) – vignz.pie Aug 07 '18 at 10:59
@user1563544 You can remove the filter box by using the dom attribute - check out https://datatables.net/reference/option/dom and simply remove 'f' tag which is the filter box. Also you should resize some columns so that they add up to 12 – Kyborek Jun 10 '19 at 09:57
Worked for me. I was using 'seach' as opposed to 'searching'. Docs actually state 'search' which clearly doesn't work. – japes Sophey Nov 22 '19 at 11:22
1

WRONG ANSWER - `searching: false` disables `search()` function for the DT at all – Umair Ayub Jul 16 '21 at 06:29
@UmairAyub Thank you, I've included a solution for this problem in my answer. – antpaw Jul 21 '21 at 21:12
https://datatables.net/reference/option/searching – Hossein Hashemi Dec 08 '21 at 10:12
Wrong answer. this will disable the search function. It will ruin the project when individual column filtering is required. – scorpionipx Sep 27 '22 at 12:23
beware that `lrt` will hide pagination, more info here https://datatables.net/reference/option/dom#Options – Wibisono Indrawan Dec 11 '22 at 08:55

score 93 · Answer 2 · answered Apr 18 '11 at 18:46

93

Check out http://www.datatables.net/examples/basic_init/filter_only.html for a list of features to show/hide.

What you want is to set "bFilter" and "bInfo" to false;

$(document).ready(function() {
    $('#example').dataTable( {
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
                 } );
} );

answered Apr 18 '11 at 18:46

Eric

3,632
2
33
28

@Eric thank you its working for me, but i want to show "bPaginate" only i don't want to show "binfo" how i can implement if i did "bInfo" = false and "bPaginate"= true then both are showing – amit Feb 16 '17 at 16:35
In the latest version of DataTables is just `{paging: false, info: false}` – josemmo Jun 03 '18 at 20:56

score 47 · Answer 3 · answered Apr 23 '12 at 20:01

47

You can also not draw the header or footer at all by setting sDom: http://datatables.net/usage/options#sDom

'sDom': 't'

will display JUST the table, no headers or footers or anything.

It's discussed some here: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

answered Apr 23 '12 at 20:01

Scott Stafford

43,764
28
129
177

3

This should be added to antpaw's answer. This affectively hides the filter and info placeholder divs still remaining when passing "bFilter": false, "bInfo": false. – tibc-dev Dec 26 '13 at 17:37
This removes pagination in the footer. I don't think it's a good practice. – Anirudh Jan 21 '17 at 14:32
3

It's now called 'dom' and you can controll a lot more with this option. See https://datatables.net/reference/option/dom – unkreativ Jul 13 '17 at 08:05
1

This is actually the correct answer. The other answers involving css and js tweaks are all hacks. If you want to use DataTables properly, this is how you do that. As an example, if you want to show all the bits and pieces (paging, page-length etc.) except for the search box, you would add a `dom` property with a value of `ltipr` see https://datatables.net/reference/option/dom – onefootswill Sep 08 '19 at 03:16

score 27 · Answer 4 · answered Apr 29 '15 at 02:31

27

If you are using custom filter, you might want to hide search box but still want to enable the filter function, so bFilter: false is not the way. Use dom: 'lrtp' instead, default is 'lfrtip'. Documentation: https://datatables.net/reference/option/dom

answered Apr 29 '15 at 02:31

sulaiman sudirman

1,826
1
24
32

score 12 · Answer 5 · edited Oct 05 '16 at 13:52

12

var table = $("#datatable").DataTable({
   "paging": false,
   "ordering": false,
   "searching": false
});

edited Oct 05 '16 at 13:52

styopdev

2,604
4
34
55

answered Oct 05 '16 at 13:02

Pietro La Grotta

317
2
5

score 7 · Answer 6 · answered Dec 17 '09 at 09:58

7

A quick and dirty way is to find out the class of the footer and hide it using jQuery or CSS:

$(".dataTables_info").hide();

answered Dec 17 '09 at 09:58

kgiannakakis

103,016
27
158
194

score 5 · Answer 7 · answered Feb 13 '15 at 13:42

As said by @Scott Stafford sDOM is the most apropiated property to show, hide or relocate the elements that compose the DataTables. I think the sDOM is now outdated, with the actual patch this property is now dom.

This property allows to set some class or id to an element too, so you can stylish easier.

Check the oficial documentation here: https://datatables.net/reference/option/dom

This example would show only the table:

$('#myTable').DataTable({
    "dom": 't'
});

score 4 · Answer 8 · answered Feb 26 '10 at 11:51

4

if you are using themeroller:

.dataTables_wrapper .fg-toolbar { display: none; }

answered Feb 26 '10 at 11:51

paja01

41
1

+1 Thanks, This pointed me in the right direction. I didnt want to hide the header as well so i just wanted the footer. ui-corner-bl and ui-corner-br classes are only applied to the footer so i used either one to get the footer wrapper........ $(".ui-corner-bl").hide(); – Kevbo Feb 15 '18 at 19:21

score 4 · Answer 9 · edited Sep 04 '15 at 14:13

4

<script>
$(document).ready(function() {
    $('#nametable').DataTable({
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
    });
});
</script>

in your datatable constructor

https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box

edited Sep 04 '15 at 14:13

KingRider

2,140
25
23

answered Feb 04 '15 at 11:31

Gaurav Bhatra

207
2
7

this answer doesn't have any link to any doc, and you did not provide a working answer – elad silver May 04 '15 at 22:13

score 4 · Answer 10 · answered May 03 '16 at 10:51

This can be done by simply changing the configuration:

$('table').dataTable({
      paging: false, 
      info: false
 });

But to hide the empty footer; this piece of code does the trick:

 $('table').dataTable({
      paging: false, 
      info: false,

      //add these config to remove empty header
      "bJQueryUI": true,
      "sDom": 'lfrtip'

});

score 3 · Answer 11 · edited Sep 24 '14 at 08:57

3

Here you can add to sDom element to your code, top search bar is hidden.

$(document).ready(function() {
    $('#example').dataTable( {
"sDom": '<"top">rt<"bottom"flp><"clear">'
 } );
} );

edited Sep 24 '14 at 08:57

fedorqui

275,237
103
548
598

answered Sep 24 '14 at 08:41

venky

73
1
1
9

score 2 · Answer 12 · edited Jun 01 '17 at 08:01

2

Just a reminder you can't initialise DataTable on the same <table> element twice.

If you encounter same issue then you can set searching and paging false while initializing DataTable on your HTML <table> like this

 $('#tbl').DataTable({
    searching: false, 
    paging: false,
    dom: 'Bfrtip',
    buttons: [
       'copy', 'csv', 'excel', 'pdf', 'print'
    ]
 });

edited Jun 01 '17 at 08:01

antpaw

15,444
11
59
88

answered Mar 06 '17 at 07:26

Hitesh Sahu

41,955
17
205
154

score 1 · Answer 13 · edited Jul 24 '14 at 12:06

1

You can use sDom attribute. Code looks something like this.

$(document).ready(function() {
    $('#example').dataTable( {
        'sDom': '"top"i'
                 } );
} );

İt hides search and pager box.

edited Jul 24 '14 at 12:06

seenukarthi

8,241
10
47
68

answered Jul 24 '14 at 12:02

Justget Meinside

11
1

score 1 · Answer 14 · answered Feb 13 '19 at 21:43

As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes.

-dataTables documentation: HTML5 data-* attributes - table options

So you can specify data-searching="false" data-paging="false" data-info="false" on the table. For example, this table will not allow searching, apply paging, or show the information block:

<table id="example" class="display" width="100%" data-searching="false" data-paging="false" data-info="false">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

See a working example at https://jsfiddle.net/jhfrench/17v94f2s/.

The advantage to this approach is that it allows you to have a standard dataTables call (ie, $('table.apply_dataTables').DataTable()) while being able to configure the dataTables options table-by-table.

score 1 · Answer 15 · answered Mar 02 '20 at 15:39

If you only want to hide the search form for example because you have column input filters or may be because you already have a CMS search form able to return results from the table then all you have to do is inspect the form and get its id - (at the time of writing this, it looks as such[tableid]-table_filter.dataTables_filter). Then simply do [tableid]-table_filter.dataTables_filter{display:none;} retaining all other features of datatables.

score 1 · Answer 16 · answered Nov 26 '20 at 14:27

1

this worked for me #table is a Id of table

$('#table').dataTable({searching: false, paging: false, info: false});

answered Nov 26 '20 at 14:27

Rishikant Srivastava

19
1
4

score 1 · Answer 17 · answered Jan 14 '22 at 21:17

1

It works for me;

You can remove search bar using this attribute on table : data-searching="false"

answered Jan 14 '22 at 21:17

Hamim Kavuk

11
1

2

The only thing this "new" answer does is to repeat what half of the other answers are already saying, including [the accepted answer](https://stackoverflow.com/a/1920651/14267427). – Tyler2P Jan 14 '22 at 21:35

Antonio B L Jr · Answer 18 · 2022-08-29T16:38:08.370

1

$('#my_table').DataTable({
   "iDisplayLength": 100,
   "searching": false, 
   "paging": false,
   "info": false,
});

edited Aug 29 '22 at 16:38

answered Aug 29 '22 at 16:37

Antonio B L Jr

21
2

score 0 · Answer 19 · answered Dec 17 '09 at 10:00

0

You could hide them via css:

#example_info, #example_filter{display: none}

answered Dec 17 '09 at 10:00

graphicdivine

10,937
7
33
59

Not 'wrong', merely different. It depends on whether you want to hide all instances (by class, as in your answer), or a particular instance (by ID, as in mine). – graphicdivine Dec 17 '09 at 10:07

score 0 · Answer 20 · answered Jan 16 '14 at 08:39

I have done this by assigning footer an id and then styling using css :

    <table border="1" class="dataTable" id="dataTable_${dtoItem.key}" >
     <thead>
        <tr>
            <th></th>

        </tr>
    </thead>
 <tfoot>
    <tr>
            <th id="FooterHidden"></th>
    </tr>
</tfoot>
<tbody>

    <tr>

                <td class="copyableField"></td>

    </tr>
 </tbody>
</table>

then styling using css :

#FooterHidden{
   display: none;
}

As above mentioned ways aren't working for me.

score 0 · Answer 21 · answered Sep 28 '16 at 15:13

0

I think the simplest way is:

<th data-searchable="false">Column</th>

You can edit only the table you have to modify, without change common CSS or JS.

answered Sep 28 '16 at 15:13

WalterV

1,490
2
21
33

score 0 · Answer 22 · answered Mar 27 '21 at 09:27

No filtering input control. (https://datatables.net/reference/option/dom)

    /* Results in:
        {length}
        {processing}
        {table}
        {information}
        {pagination}
    */
    $('#example').dataTable( {
      "dom": 'lrtip'
    } );

score 0 · Answer 23 · answered Jun 29 '23 at 04:44

        $(document).ready(function() {          
        var table = $('#example').DataTable({
          dom: 'lrt',
          paging: false,
          info: false,
          "search": {
            "caseInsensitive": true
          }
        });
      $('#txtSearch').on('keyup change', function() {
        dataTable_Search($(this).val());
      });

      $('#btnClear').on('click', function() {
        $('#txtSearch').val('');
        dataTable_Search('');
      });

      function dataTable_Search(v) {
        table.search(v).draw();
      }
    });

Fiddler : https://jsfiddle.net/godlymathew/mbn78xdh/

How can I remove the search bar and footer added by the jQuery DataTables plugin?

23 Answers23

Linked

Related