How can I remove the search bar and footer added b

问题:

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?

回答1:

For DataTables >=1.10, use:

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

For DataTables <1.10, use:

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

or using pure CSS:

.dataTables_filter, .dataTables_info { display: none; }

回答2:

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

回答3:

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:

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

回答5:

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

回答6:

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

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

回答7:

if you are using themeroller:

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

回答8:

<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

回答9:

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

回答10:

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'

});

回答11:

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

回答12:

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

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

İt hides search and pager box.

回答13:

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

回答14:

You could hide them via css:

#example_info, #example_filter{display: none}

回答15:

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.

回答16:

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.

回答17:

hello friends you can add simply searching: false in your js





$('#companies_grid').DataTable({
        responsive: true,
        searching: false,
        iDisplayLength: 25,
        "ajax": base_url + "companies/company_table",
        "columns": [{
                "data": "SRNO"
            },
            {
                "data": "CompanyName"
            },
            {
                "data": "Country"
            },
            {
                "data": "CustomDomain"
            },
            {
                "data": "Email"
            },
            {
                "data": "Edit"
            }
        ]
    });