Clear the datatable column filters using a button

emc_tgn15

Good Day,

I usually do things with PHP and when I have come into this jquery datatable plugin which is a good feature and I so love it. I had bump into some issues. I am fairly new to the javascript and jquery environment and still coping up with how it works.

My goal is to clear the column filters. Found one solution but all it does is clear the text in the search field but not the column filter.

Below is my code.

Button for clear column filter.

//datatable $(document).ready(function() { $('#datatable').DataTable( { dom: 'Bfrtip', buttons: [ { text: 'Refresh', action: function ( e, dt, node, config ) { var table = $('#datatable').DataTable(); table .search( '' ) .columns().search( '' ) .draw(); } } ,'excelHtml5','pdfHtml5','print'], "order": [[ 7, "asc" ]] } ); } );

This is how i display my column filter

//column filter $(document).ready(function() { $('#datatable tfoot th').each( function () { var title = $(this).text(); $(this).html( '' ); } ); var table = $('#datatable').DataTable(); table.columns().every( function () { var that = this; $( 'input', this.footer() ).on( 'keyup change', function () { if ( that.search() !== this.value ) { that .search( this.value ) .draw(); } } ); } ); } );

Any help is highly appreciated.

glenderson

Make this the function for refresh and it should work.

$("#datatable").DataTable().search("").draw()

emc_tgn15

@glenderson

Thank you for taking time to reply to inquiry. I will give this a try

bsuk

I'm looking to do something similar.
The above code clears the main search filter, but not the individual columns (at least not for me).

Here's my working code:

{ text: 'Clear/Reset',
    
    action: function ( e, dt, node, config ) {

    // Reset Column filtering
    $('#datatable tfoot input').val('').change();

    // Reset column order
    table.colReorder.reset();
    
    //Reset hidden columns to my preferred defaults
    table.column( 0 ).visible( true );
    table.column( 1 ).visible( true );
    table.column( 2 ).visible( true );
    table.column( 3 ).visible( true );
    table.column( 4 ).visible( true );
    table.column( 5 ).visible( true );
    table.column( 6 ).visible( true );
    table.column( 7 ).visible( false );
    table.column( 8 ).visible( false );
    table.column( 9 ).visible( false );
    
    // Redraw table (and reset main search filter)
    $("#datatable").DataTable().search("").draw();

    },
                }