Clearing tfoot text input filters

tangerine

Hi Allan.
Thought I could do this - turns out my jQuery is even worse than I knew.

I have individual column filters set up like this, and it's working fine:

    // Set up column filtering: add a text input to each footer cell                                    
    $('#datatable tfoot th').each( function () {                                         
        var title = $(this).text();                                                    
        $(this).html( '<input type="text" placeholder="'+title+'" />' );        
    } );                                                                               

// Apply the column filter(s)                                                                
    oTable.columns().eq( 0 ).each( function ( colIdx ) {                                
        $( 'input', oTable.column( colIdx ).footer() ).on( 'keyup change', function () {
            oTable                                                                      
                .column( colIdx )                                                      
                .search( this.value )                                                  
                .draw();                                                               
        } );                                                                           
    } );                 

I also have this under a button:

$('button#clear_filters').click( function() {
oTable.search( '' ).draw();

oTable
     .columns()
     .search( '' )
     .draw();
}) ;

The button click clears the current (filtered) data selection, and also clears the global filter input. But I can't clear the tfoot filter input(s).
So: A. Is my 'button#clear_filters' function fit for purpose, and if so B. what should I add to it to clear the tfoot filters?

TIA.

allan

Hi,

Nicely formed question - thanks :-). It looks like you are already 99% of the way there, but are you rightly surmise, DataTables knows nothing about your column input filters, so you would need to do it "manually".

This you can do by adding a single line to your clear event handler:

$('#datatable tfoot input').val('');

That will just select all of the input elements in the footer and set the value to be an empty string. You could then trigger a change event on the elements (simply append .change() to the line above) and remove the DataTables API call to clear the filtered, but what you have is already the most efficient way of doing it. Although triggering change might save a few lines of code, it would redraw the table once for every input (appending .eq(0).change() would address that, but I like the method you have already!).

Regards,
Allan