How to call custom filtering function everytime value changes in option?

Azima1993

I need to filter records based on the value selected in drop-down. This is what I tried to do:

  var table = $('#checkin-checkout-record-table').DataTable({
    "bPaginate": true,
    "bLengthChange": true,
    "bFilter": true,
    "bSort": true,
    "bInfo": true,
    // "order": [[0, 'asc'], [4, 'asc']],
    "aLengthMenu": [50, 100],
    "bAutoWidth": false,

    //added later
    "columnDefs": [
        {
            "targets": [ 8 ],
            "visible": false,
            // "searchable": false
        },
    ]

});

function employee_filter(status)
{
    $.fn.dataTable.ext.search.push
    (
    function( oSettings, aData, iDataIndex ) {
        // check if current table is part of the allow list
        if ( $.inArray( oSettings.nTable.getAttribute('id'), allowFilter ) == -1 )
        {
           // if not table should be ignored
           return true;
        }
        check = 1;
        if(typeof(status) != "undefined" && status !== null)
        {
            check = parseInt(status);
        }

           return aData[8] == check;
        }
    );

table.draw();
};


/* Add event listener to the dropdown input */
$('select#employee_filter').change( function() { 
    employee_filter( $(this).val() ); 
} );

Here's my HTML

                <select class="form-control" style="width: 25%;" id="employee_filter">
                     <option value=1 selected>Active Employees</option>
                      <option value=0>Ex-Employees</option>
                  </select>

When I select 'Ex-employees' it displays records with status = 0, which is fine, but when I search for data with status = 1 in the search box, it is still found.
Also when I select Active Employees after this, No records are displayed. I need to refresh the page to display the records again. What is wrong?