title: How to hide and show rows in jquery datatable with a checkbox
body: <p>I have a jquery datatable as follows:</p>
  
  <pre><code>&lt;table id="dt_default" class="uk-table exclude_table" cellspacing="0" width="100%"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Number&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="aa"&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;N1&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="bb"&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;N1&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="cc"&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;N1&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="dd"&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;N1&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I have a set of checkbox as follows, which is placed above the datatable:</p>
  
  <pre><code>&lt;div&gt;
       AA&lt;input type="checkbox" class="exclude" value="aa"&gt;
       BB&lt;input type="checkbox" class="exclude" value="analysis"&gt;
       CC&lt;input type="checkbox" class="exclude" value="progress"&gt;
       DD&lt;input type="checkbox" class="exclude" value="done"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I need is: When a checkbox is checked the class corresponding to its value must hide from the table and when it is unchecked, it should show it back.</p>
  
  <p>Eg: If you check the checkbox AA, the value corresponding to it is aa. So class aa must be hidden from table and when it is unchecked, it must show again.</p>
  
  <p>The script I have tried for this is:</p>
  
  <pre><code>$('.exclude').click(function() { 
      $(".exclude").each(function(){
          if ($(this).prop('checked')==true)
          { 
              var hidden = $(this).attr("value");
              $.fn.dataTableExt.afnFiltering.push(
              function( oSettings, aData, iDataIndex ) {
                  var row = oSettings.aoData[iDataIndex].nTr;
                  return $(row).hasClass(hidden) ? false : true;
              }
              );
           }
          });                  
      });
  </code></pre>
  
  <p>This code is not working as expected. </p>
  
  <p>What it does is, it hides the corresponding class when a checkbox is checked and we have to do either search/sort in datatable. It is not directly working when the checkbox is checked. </p>
  
  <p>Also how to show the row back when checkbox is unchecked ? </p>