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

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?

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

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

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

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

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

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

if you are using themeroller:

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

<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

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'

});

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

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

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

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

İt hides search and pager box.

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"

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

You could hide them via css:

#example_info, #example_filter{display: none}

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.

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