title: Hide/show specific rows on checkbox in datatables
body: <p>I have a datatables table, some of the rows in my table have the class <code>banned</code>. I want to exclude these rows on page load, show them when a checkbox is checked, and exclude them again if the checkbox is unchecked.</p>
  
  <p>Here is my code so far</p>
  
  <pre><code>&lt;div class="field"&gt;
      &lt;div class="ui toggle checkbox"&gt;
          &lt;input type="checkbox" id="display_banned_songs" tabindex="0" class="hidden"&gt;
          &lt;label&gt;Display Banned Songs?&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  $('.ui.toggle.checkbox').checkbox({
      onChecked: function() {
          console.log('onChecked called');
          $.fn.dataTable.ext.search.push(
             function(settings, data, dataIndex) {
                return true;
             }
          );
      },
      onUnchecked: function() {
          console.log('onUnchecked called');
          $.fn.dataTable.ext.search.push(
             function(settings, data, dataIndex) {
                return !$(table.row(dataIndex).node()).hasClass('banned');
             }
          );
      },
      onChange: function() { table.draw() }
  });
  </code></pre>
  
  <p>Currently, the rows are <em>not</em> excluded on page load, so I know that my <code>onUnchecked</code> method works, because I can see the rows on page load but when I check and then uncheck my checkbox, the specified rows are hidden and everything else shows.</p>
  
  <p>I can't figure out why my <code>onChecked</code> function doesn't work, I basically need it to display <em>all</em> the rows (unless filtered by the search bar).</p>
  
  <p>I'm also not sure how to hide the specified rows on page load.</p>
  
  <p>How can I get my <code>onChecked</code> method working, and how can I hide the rows on page load?</p>