draw table after ajax does not apply to filtration

Yasser

Hello
I'm having a datatable with buttons work using ajax to update some data in the table. This table has a filtration drop down menu.

var table = $('#data').DataTable({
      "lengthMenu": [[50, 100, -1], [50, 100, "All"]]
 });

Example:

<tr><td>jack</td><td>2016</td><td>paid</td></tr>
<tr><td>andy</td><td>2015</td><td>didn't pay<input type="button" id="1" class="btn"></td></tr>

and drop down menu with 2 values: paid and didn't pay

clicking the button changes the text to "paid" no problem at all. After success:

$("#status").change(function() { table.column(2).search($(this).val()).draw() });
 $(".btn").on('click',function (e) {
            e.preventDefault();
            var id = $(this).attr('id');
            $.post('ajax/pay.php',{id:id}).done(function (data) {
                if(data.trim().indexOf('ok')>-1){
                    alert('done'); //alert is displayed
                    $(".btn[id="+id+"]").fadeOut('normal'); //faded out
                    $(".btn[id="+id+"]").parent().text('paid'); //text changed
                    table.draw();
                }                   
            });
        });

but when I change the drop down menu to "paid" i can't see the second row and when I change to "didn't pay' I can see it which means the drop down menu didn't recognize the change that happened after the AJAX.
So is there any way to make the filtration parameters reload or redraw the table after the AJAX to display updated data?
Tanks in advance and best wishes.