Clear the datatable column filters using a button

Clear the datatable column filters using a button

emc_tgn15emc_tgn15 Posts: 2Questions: 1Answers: 0

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.

Answers

  • glendersonglenderson Posts: 231Questions: 11Answers: 29

    Make this the function for refresh and it should work.

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

  • emc_tgn15emc_tgn15 Posts: 2Questions: 1Answers: 0

    @glenderson

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

  • bsukbsuk Posts: 92Questions: 26Answers: 2
    edited March 2016

    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();
    
        },
                    }
    
This discussion has been closed.