JSFiddle - React, Tailwind, and code Playground

by Musakkhir Sayyed

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="">Electricians: </label>  <input type="checkbox" value="Electricians" class="categoryFilter" name="categoryFilter"> </li>
            	            	 <li><label for="">Carpenter: </label>  <input type="checkbox" value="Carpenter" class="categoryFilter" name="categoryFilter"> </li>
            	            </ul>
                  
            </div>
                
                



<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Category</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Category</th>

            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Electricians</td>
            </tr>

            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Carpenter</td>
            </tr> 
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Carpenter, Electricians</td>
            </tr>     
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td> </td>
            </tr>               
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Architect </td>
            </tr>             
        </tbody>
    </table>

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[2]; //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;
			        
			    }
			);


$(document).ready(function() {
    var  example = $('#example').DataTable();
    
		
		$('.categoryFilter').click(function(){
			
			example.draw();

		});		    
    
} );