JSFiddle - React, Tailwind, and code Playground

by santpir

HTML

<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<div id="Filters">
            <h5>Filter by Category</h5>
            <ul class="list-inline">
            	            	 <li><label for="">Agrumi: </label>  <input type="checkbox" value="Agrumi" class="categoryFilter" name="categoryFilter"> </li>
            	            	 <li><label for="">Palme: </label>  <input type="checkbox" value="Palme" class="categoryFilter" name="categoryFilter"> </li>
                              <li><label for="">Piante fiorite: </label>  <input type="checkbox" value="Piante Fiorite" class="categoryFilter" name="categoryFilter"> </li>
            	            </ul>
                  
            </div>
                
                



<table id="tabledata" class="table display nowrap table-striped dataTable dt-checkboxes-select" cellspacing="0" width="100%" role="grid" style="width: 100%;">
                            <thead>
                                <tr role="row"><th class="thead sorting_desc" rowspan="1" colspan="1" style="width: 45px;" aria-label=""><select><option value=""></option><option value="Crazy Offer">Crazy Offer</option><option value="New Entry">New Entry</option><option value="null">null</option></select></th><th class="thead sorting_disabled" rowspan="1" colspan="1" style="width: 56px;" aria-label=""><select><option value=""></option><option value="Latina">Latina</option><option value="Puglia">Puglia</option><option value="Sicilia 1">Sicilia 1</option><option value="Sicilia 2">Sicilia 2</option><option value="Sicilia 3">Sicilia 3</option></select></th><th class="thead sorting_disabled" rowspan="1" colspan="1" style="width: 29px;" aria-label=""><select><option value=""></option><option value="107                 ">107                 </option><option value="108                 ">108                 </option><option value="112                ...

JavaScript

$.fn.dataTable.ext.search.push(
			    function( settings, data, dataIndex ) {
			    	var categoryFilter,categoryCol,categoryArray,found;
		    	
			    	//creates selected checkbox array
					categoryFilter = $('.categoryFilter:checked').map(function () {
			    		  return this.value;
			    		}).get();
					
					if(categoryFilter.length){
						
						categoryCol = data[9]; //filter column
						
						categoryArray =  $.map( categoryCol.split(','), $.trim); // splites comma seprated string into array
						
						// finding array intersection
						found = $(categoryArray).not($(categoryArray).not(categoryFilter)).length;
						
						if(found == 0){
							return false;
						}
						else{
							return true;
						}		
					}
						    	
					// default no filter
					return true;
			        
			    }
			);



    var  filtrogrp = $('#tabledata').DataTable();
    
		
		$('.categoryFilter').click(function(){
			
			filtrogrp.draw();

		});