Filter dataTables.net without included filter-box

2019-04-18 04:03发布

问题:

I want to use the filter function of DataTables, but don't want to use their search box with it.

In their docs under bFilter it says:

Note that if you wish to use filtering in DataTables this must remain 'true' - to remove the default filtering input box and retain filtering abilities, please use

after which the sentence is left incomplete.

I tried:

var oTable = $('#sortable').dataTable({
    'bPaginate':false,
    'bInfo':false,
    'bFilter': true // displays Search box, setting false removes filter ability all together
});
$('#Accumulate').click(function(){
    oTable.fnFilter("Accumulate");
});

回答1:

You can also hide is using css class

<style type="text/css">
.dataTables_filter {
     display: none;
}
</style> 


回答2:

Pratyush,

Pure cosmetic showing and hiding of different UI elements is done with the sDom parameter:

http://datatables.net/usage/options#sDom

Note that the required syntax is different depending on if you're using jQuery UI or not.



回答3:

Use (potentially speed up datatable initialization as avoid some calculation):

$("#table").dataTable({"bFilter": false});

or any sDom without f option (refer to official docs http://datatables.net/usage/options#sDom for list of available options):

$("#table").dataTable({"sDom": '...t...'});

Look for same options at official support site: http://datatables.net/forums/discussion/289/disable-search-filter-text-box



回答4:

"sDom": 'ltipr'

is the most simply of ways to do it.

full example that I have used:

 oTable = $('#overview').dataTable(

        {
           "aoColumns":[
                               null,
                               null,
                               null,
                               null,
                               null,
                                { "sSortDataType":"date-euro"},
                                { "sSortDataType":"date-euro",},
                               null
              ],
              "aaSorting":[],
              "iDisplayLength": -1,
              "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
              "sDom": 'ltipr'

        }
        );