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>
