Q:

I need to filter bootstrap jQuery datatable

I need to filter datatable. I have already write code and its working but when i change the status by click on button then it is not working.
i.e: if there is enabled button i click on it then it will be changed to disabled button. Then if i filter table it is not working.
Same way if there is disable button and i click on it then it will change to enabled button but there is no effects on filtering datatable.
Filtering remains same although i am changing filter value.

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
</head>

<body>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <!-- HTML -->
            <table id="data-table" class="table table-hover table-bordered table-stripped">
                <thead>
                    <tr>
                        <th class="text-center">#</th>
                        <th>Category Name</th>
                        <th class="text-center filterable customFilterColumn">Status</th>
                    </tr>
                <thead>
                <tbody>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="minimal" /></td>
                        <td>Shoes</td>
                        <td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled">Disabled</button></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="minimal" /></td>
                        <td>Shoes</td>
                        <td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled">Disabled</button></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="minimal" /></td>
                        <td>Shoes</td>
                        <td class="text-center" data-filter="Enabled"><button class="btn btn-default btn-xs btn-status status-enabled">Enabled</button></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="minimal" /></td>
                        <td>Shoes</td>
                        <td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled">Disabled</button></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="minimal" /></td>
                        <td>Shoes</td>
                        <td class="text-center" data-filter="Enabled"><button class="btn btn-default btn-xs btn-status status-enabled">Enabled</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</body>

<script type="text/javascript">
    $(document).ready(function(){
            
        var table = $('#data-table').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": true,
            "aaSorting": [
                ['1', 'asc']
            ],
            /* "order": [], */
            "columnDefs": [{
                /* "targets": [0,-1], */
                "targets": [0,-1],
                "orderable": false
            }]
        });
        
        function filter(source,customFilterColumn){

            var count = 0;
            var tableid = source.split(' ')[0];
            
            $(source).each( function ( k ) {

                if ($(this).text() !== '') {
                
                    if(++count==1){
                        $(tableid).parents("div.row:first").before('<div class="row"><div id="filtercontent"></div></div>');
                    }
                    
                    var i = $(this).index();
                
                    var select = $('<select id="filer_'+i+'" class="form-control"><option value="">All</option></select>')
                        .insertBefore('#filtercontent')
                        
                        .on( 'change', function () {
                            var val = $(this).val();
                            
                            table.column( i )
                                .search( val ? '^'+$(this).val()+'$' : val, true, false )
                                .draw();
                        } );
                        
                    // Get the Status values a specific way since the status is a anchor/image
                    if ($(this).hasClass(customFilterColumn)) {
                        var dataFilterColumn = [];
                        
                        /* ### IS THERE A BETTER/SIMPLER WAY TO GET A UNIQUE ARRAY OF <TD> data-filter ATTRIBUTES? ### */
                        table.column( i ).nodes().to$().each( function(d, j){
                            var thisStatus = $(j).attr("data-filter");
                            if($.inArray(thisStatus, dataFilterColumn) === -1) dataFilterColumn.push(thisStatus);
                        } );
                        
                        dataFilterColumn.sort();
                                        
                        $.each( dataFilterColumn, function(i, item){
                            select.append( '<option value="'+item+'">'+item+'</option>' );
                        });

                    }
                    // All other non-Status columns (like the example)
                    else {
                        table.column( i ).data().unique().sort().each( function ( d, j ) {  
                            select.append( '<option value="'+d+'">'+d+'</option>' );
                        }); 
                    }
                    $('#filer_'+i).wrapAll('<div class="col-sm-2 form-group"></div>');
                    $('<label>'+$(this).text()+'</label>').insertBefore('#filer_'+i);
                    
                }
            });
            $(tableid+'_wrapper').removeClass('form-inline');
        }
        
        filter('#data-table thead th.filterable','customFilterColumn');
        
        $('.btn-status').click(function(){
            var id = $(this).val();
            var status = parseInt($(this).attr('status'));
            
            $(this).toggleClass('status-enabled');
            $(this).toggleClass('status-disabled');
            if(status==0){
                $(this).html('Enabled');
                $(this).attr('status','1');
                $(this).parent().attr('data-filter','Enabled');
            }
            else{
                $(this).html('Disabled');
                $(this).attr('status','0');
                $(this).parent().attr('data-filter','Disabled');
            }
        });
        
    });
</script>

A:

Just use table.rows().invalidate().draw(); in your .btn-status click event. Issue is you are updating just html but not the datatable data. For more detail refer this link Datatable row invalidate

$(document).ready(function() {

  var table = $('#data-table').DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    "aaSorting": [
      ['1', 'asc']
    ],
    /* "order": [], */
    "columnDefs": [{
      /* "targets": [0,-1], */
      "targets": [0, -1],
      "orderable": false
    }]
  });

  function filter(source, customFilterColumn) {

    var count = 0;
    var tableid = source.split(' ')[0];

    $(source).each(function(k) {

      if ($(this).text() !== '') {

        if (++count == 1) {
          $(tableid).parents("div.row:first").before('<div class="row"><div id="filtercontent"></div></div>');
        }

        var i = $(this).index();

        var select = $('<select id="filer_' + i + '" class="form-control"><option value="">All</option></select>')
          .insertBefore('#filtercontent')

          .on('change', function() {
            var val = $(this).val();

            table.column(i)
              .search(val ? '^' + $(this).val() + '$' : val, true, false)
              .draw();
          });

        // Get the Status values a specific way since the status is a anchor/image
        if ($(this).hasClass(customFilterColumn)) {
          var dataFilterColumn = [];

          /* ### IS THERE A BETTER/SIMPLER WAY TO GET A UNIQUE ARRAY OF <TD> data-filter ATTRIBUTES? ### */
          table.column(i).nodes().to$().each(function(d, j) {

            var thisStatus = $(j).attr("data-filter");
            if ($.inArray(thisStatus, dataFilterColumn) === -1) dataFilterColumn.push(thisStatus);
          });

          dataFilterColumn.sort();

          $.each(dataFilterColumn, function(i, item) {
            select.append('<option value="' + item + '">' + item + '</option>');
          });

        }
        // All other non-Status columns (like the example)
        else {
          table.column(i).data().unique().sort().each(function(d, j) {
            select.append('<option value="' + d + '">' + d + '</option>');
          });
        }
        $('#filer_' + i).wrapAll('<div class="col-sm-2 form-group"></div>');
        $('<label>' + $(this).text() + '</label>').insertBefore('#filer_' + i);

      }
    });
    $(tableid + '_wrapper').removeClass('form-inline');
  }

  filter('#data-table thead th.filterable', 'customFilterColumn');

  $('.btn-status').click(function() {
    var id = $(this).val();
    var status = parseInt($(this).attr('status'));
    $(this).toggleClass('status-enabled');
    $(this).toggleClass('status-disabled');
    if (status == 0) {
      $(this).html('Enabled');
      $(this).attr('status', '1');
      $(this).parent().attr('data-filter', 'Enabled');
    } else {
      $(this).html('Disabled');
      $(this).attr('status', '0');
      $(this).parent().attr('data-filter', 'Disabled');
    }

    table.rows().invalidate().draw();
  });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <!-- HTML -->
    <table id="data-table" class="table table-hover table-bordered table-stripped">
      <thead>
        <tr>
          <th class="text-center">#</th>
          <th>Category Name</th>
          <th class="text-center filterable customFilterColumn">Status</th>
        </tr>
        <thead>
          <tbody>
            <tr>
              <td class="text-center"><input type="checkbox" class="minimal" /></td>
              <td>Shoes</td>
              <td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled" status="0">Disabled</button></td>
            </tr>
            <tr>
              <td class="text-center"><input type="checkbox" class="minimal" /></td>
              <td>Shoes</td>
              <td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled" status="0">Disabled</button></td>
            </tr>
            <tr>
              <td class="text-center"><input type="checkbox" class="minimal" /></td>
              <td>Shoes</td>
              <td class="text-center" data-filter="Enabled"><button class="btn btn-default btn-xs btn-status status-enabled" status="1">Enabled</button></td>
            </tr>
            <tr>
              <td class="text-center"><input type="checkbox" class="minimal" /></td>
              <td>Shoes</td>
              <td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled" status="0">Disabled</button></td>
            </tr>
            <tr>
              <td class="text-center"><input type="checkbox" class="minimal" /></td>
              <td>Shoes</td>
              <td class="text-center" data-filter="Enabled"><button class="btn btn-default btn-xs btn-status status-enabled" status="1">Enabled</button></td>
            </tr>
          </tbody>
    </table>
  </div>
</div>

