“DataTable -Filter” Code-Antworten

DataTable -Filter

//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]