jQuery DataTables: hide search bar

Question

I seem not able to hide DataTables default search bar. So far, I have tried solution from this thread, but setting bFilter:false disables filtering entirely, so my

Answer 1

Simply add this class in your css - .dataTables_filter, .dataTables_info { display: none; }

The live instance -

$(document).ready(function () {
    let table = $('#mytable').DataTable();
    $('#mytable tfoot th').each(function (i) {
        let title = $('#mytable thead th').eq($(this).index()).text();
        $(this).html('');
    });
    $(table.table().container()).on('keyup', 'tfoot input', function () {
        table.column($(this).data('index'))
            .search(this.value)
            .draw();
    });
});

.dataTables_filter, .dataTables_info { display: none; }

    

        

            

                
name
                
type
                
color
            
        
        

            

                

                

                

            
        
        

            

                
apple
                
fruit
                
red
            
            

                
banana
                
fruit
                
yellow
            
            

                
carrot
                
vegie
                
red
            
            

                
potato
                
vegie
                
brown