jQuery datatables is providing us feature to create reach future data grid with search, filter,  sorting, pagination and etc. Still real world applications need extended requirement, fortunately jQuery datatables providing the option to extend the features for us. Let’s see how to create the external category filter with below explanations.

External category filter

In many cases, we need to create the external filters like below one for data grids. We can find the plugin wiki page JQuery DataTable Column Filter – External Form that provides clear idea to create external form filter. Still this article will make your day charm! because it explains how to deal with filters with check box on external form.

Category filter plugin for jQuery datatables

JS Code :

$.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;
        
    }
);

HTML Code :

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

Here I created the jsfiddle for the working example : External category filter plugin exmaple   hope this work around will save someone of time!