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

For DataTables >=1.10, use:

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

If you still want to be able the .search() function of this plugin, you will need to "hide" the search bar 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; }

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

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

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

if you are using themeroller:

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

You could hide them via css:

#example_info, #example_filter{display: none}

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.

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.

this worked for me #table is a Id of table

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

It works for me;

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

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.

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

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

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