331

I am using jQuery DataTables.

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?

2

23 Answers 23

684

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; }
12
  • 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 :datatables.net/release-datatables/extras/FixedColumns/… . Be aware! Commented Apr 17, 2013 at 10:45
  • 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. Commented Apr 24, 2018 at 7:57
  • 1
    to completely remove footer you have to set paging:false and info:false , not just paging:false Commented Jul 24, 2018 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
    Commented Aug 7, 2018 at 10:59
  • 1
    WRONG ANSWER - searching: false disables search() function for the DT at all
    – Umair Ayub
    Commented Jul 16, 2021 at 6:29
94

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
                 } );
} );
2
  • @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
    Commented Feb 16, 2017 at 16:35
  • In the latest version of DataTables is just {paging: false, info: false}
    – josemmo
    Commented Jun 3, 2018 at 20:56
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

4
  • 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
    Commented Dec 26, 2013 at 17:37
  • This removes pagination in the footer. I don't think it's a good practice.
    – Anirudh
    Commented Jan 21, 2017 at 14:32
  • 3
    It's now called 'dom' and you can controll a lot more with this option. See datatables.net/reference/option/dom
    – unkreativ
    Commented Jul 13, 2017 at 8: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 datatables.net/reference/option/dom Commented Sep 8, 2019 at 3:16
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

0
13
var table = $("#datatable").DataTable({
   "paging": false,
   "ordering": false,
   "searching": false
});
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();
0
5

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

if you are using themeroller:

.dataTables_wrapper .fg-toolbar { display: none; }
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
    Commented Feb 15, 2018 at 19:21
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

1
  • this answer doesn't have any link to any doc, and you did not provide a working answer Commented May 4, 2015 at 22:13
4

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'

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

1

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.

1

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.

1

this worked for me #table is a Id of table

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

It works for me;

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

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.
    – Tyler2P
    Commented Jan 14, 2022 at 21:35
1
$('#my_table').DataTable({
   "iDisplayLength": 100,
   "searching": false, 
   "paging": false,
   "info": false,
});
0

You could hide them via css:

#example_info, #example_filter{display: none}
1
  • 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). Commented Dec 17, 2009 at 10:07
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.

0

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

    /* Results in:
        {length}
        {processing}
        {table}
        {information}
        {pagination}
    */
    $('#example').dataTable( {
      "dom": 'lrtip'
    } );
0
        $(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/

0

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>
<tbody>
    <tr>
        <td class="copyableField"></td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th id="FooterHidden"></th>
    </tr>
</tfoot>
</table>

Then styling using css :

#FooterHidden{
   display: none;
}

As above mentioned ways aren't working for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.