Clear column drop down filters when navigating to a different datatable

markMathews1989

Hello,

My datatable drop down column filters do not get reset when I load another datatable. I tried the following:

$("#report-table").DataTable().search("").draw()

This kind of resolves the issue, but the problem is, when I load my next datatable, the options in my drop down filter do not match the columns data. For example, if I click the account tab, all the data in my date drop down will display date from finance and so on.

This is how I currently load all my datatables and the solution I tried to use to clear the drop down filter:

$(".finance-lnk").click(function( e, settings, json, xhr) {
    table.ajax.url('/files?fileType=finance').load(rowData);
    $("#table").DataTable().search("").draw()
});

$(".accounting-lnk").click(function() {
    table.ajax.url('/files?fileType=accounting').load(rowData).search("");
    $("#table").DataTable().search("").draw()
});

$(".marketing-lnk").click(function() {
    table.ajax.url('/files?fileType=marketing').load(rowData);
    $("#table").DataTable().search("").draw()
});

I use an init function to load my initial data

reportTable.columns([3]).every( function () {
    var column = this;
    var select = $('<select class="drop-down-date-filter"><option value="">Date</option></select>')
        .appendTo( $(column.header()).empty() )
        .on( 'change', function () {
            var val = $.fn.dataTable.util.escapeRegex(
                $(this).val()
            );
            column
                .search( val ? '^'+val+'$' : '', true, false )
                .draw();
        } );
        
    column.data().unique().sort().each( function ( d ) {
        select.append( '<option value="'+d+'">'+d+'</option>' )
        
    } );
} );

markMathews1989

Resolved it by creating a separate function and calling it in my function that sets my filter.