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

Question

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 wan

Answer 1

You could hide them via css:

#example_info, #example_filter{display: none}

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

Answer 3

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.

Answer 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'

});

Answer 5

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

Answer 6

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