MultiColumn filtering using checkboxes

ssshannu

I am working on a scenario where I need to filter datatbable based on the checkbox values.
For eg, my table is having 3 rows with Type,Platform and Status and 4 columns

Below is the test data,
Type Platform Status
Dental SCA Approved
Medical SCA Approved
Dental GCP Pending
Dental SCA Pending
Medical GCP Approved

First I am displaying the checkboxes dynamically based on the unique values. I get total 6 checkboxes with names Dental,Medical,MTV,CAS,Approved,Pending

If I click on Dental checkbox, the table should filter to 3 rows matching type as Dental.
If I click on SCA checkbox, the table should filter to 2 rows matching type as dental and platform as SCA
If I click on GCP checkbox, the table should filter to 3 rows matching type as dental and platform as GCP
Again If I click on Pending the table should show only 1 row matching criteria with type as dental,platform as SCA or GCP and Status as Pending

I am able to filter the table only for the first time,later Am not able to filter the filtered data. Please help me.

Below is my code:
$(document).ready(function() {
var arr;
var typearr = [ ];
var dtable;
var table=$('#example').DataTable({
initComplete: function () {
this.api().columns([0]).every( function () {
var column = this;
column.data().unique().sort().each( function ( d, j ) {
{
addCheckbox(d);
}
} );
} );
this.api().columns([1]).every( function () {
var column = this;
column.data().unique().sort().each( function ( d, j ) {
{
addCheckbox1(d);
}
} );
} );
this.api().columns([2]).every( function () {
var column = this;
column.data().unique().sort().each( function ( d, j ) {
{
addCheckbox2(d);
}
} );
} );
},
"lengthMenu": [[10, 25, 50, 75, 100], [10, 25, 50, 75, 100]],
"searching":true
});

function addCheckbox(name) 
{
  var container = $('#cblist');
   $('#cblist tbody').append("<tr></tr>");
   var $tr = $('<tr/>');
   var $td = $('<td />');
   $('<input />', { type: 'checkbox', class:'status1', id: name, value: name}).appendTo($td);;
   $('<label />', { 'for': name, text: name }).appendTo($td);;
   $tr.append($td);
   $tr.appendTo(container);                    
}

function addCheckbox1(name) 
{
       var container = $('#cblist1');
       $('#cblist1 tbody').append("<tr></tr>");
       var $tr = $('<tr/>');
       var $td = $('<td />');
       $('<input />', { type: 'checkbox', class:'platform', id: name, value: name }).appendTo(container);
       $('<label />', { 'for': name, text: name }).appendTo(container);
       $tr.append($td);
       $tr.appendTo(container);                    
}

function addCheckbox2(name) 
{
       var container = $('#cblist2');
       $('#cblist1 tbody').append("<tr></tr>");
       var $tr = $('<tr/>');
       var $td = $('<td />');
       $('<input />', { type: 'checkbox', class:'den', id: name, value: name }).appendTo(container);
       $('<label />', { 'for': name, text: name }).appendTo(container);
       $tr.append($td);
       $tr.appendTo(container);                    
}

$(document).on('change', '[type=checkbox]', function() {
if($(this).is(":checked"))
{
alert(arr);
if(arr!=null)
{
alert('inside if');
arr = this.value;
alert(arr);
dtable.columns().search(arr,true,false).draw();
dtable=dtable.search(arr,true,false).draw();
}
else
{
alert('inside else');
arr = this.value;
dtable=table.search(arr,true,false).draw();
}
}