//HTML
<select class="payment_filter" id="payment_filter">
<option selected>Payment status</option>
<option value="1">Paid to Company</option>
<option value="2">Paid to Client</option>
<option value="3">Job Done</option>
<option value="4">All</option>
</select>
<table id="datatable1">
your table here.....
</table>
//JS
jQuery(document).ready(function() {
jQuery('#datatable1').DataTable({
"pageLength": 20,
//"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false,
'responsive': true,
"columnDefs" : [{"targets":3, "type":"date-eu"}],
"aaSorting": []
});
var table = jQuery('#datatable1').DataTable();
jQuery('#payment_filter').on('change', function (e) {
var optionSelected = jQuery("option:selected", this);
var valueSelected = this.value;
if(valueSelected == 1){
jQuery.fn.dataTable.ext.search.push(
function (settings, data, dataIndex){
return (data[6] == 'paid') ? true : false;
}
);
table.draw();
jQuery.fn.dataTable.ext.search.pop();
}else if(valueSelected == 2){
jQuery.fn.dataTable.ext.search.push(
function (settings, data, dataIndex){
return (data[7] == 'paid') ? true : false;
}
);
table.draw();
jQuery.fn.dataTable.ext.search.pop();
}
else if(valueSelected == 3){
jQuery.fn.dataTable.ext.search.push(
function (settings, data, dataIndex){
return (data[6] == 'paid' && data[7] == 'paid') ? true : false;
}
);
table.draw();
jQuery.fn.dataTable.ext.search.pop();
}
else if(valueSelected == 4){
window.location.reload();
}
});
});
//note
data[6] this is column name make sure to count columns and minus one, like my column existed on 7th number and i added data[6]