JSFiddle - React, Tailwind, and code Playground

by Chris Hughes

HTML

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https:////cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https:////cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css">
<link rel="stylesheet" href="https:////cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables_themeroller.css">
<table id="dt">
  <thead>
    <tr>
      <td>type</td>
      <td>Description</td>
      <td>Free</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>MX</td>
      <td>some stuff</td>
      <td>0</td>
    </tr>
    <tr>
      <td>A</td>
      <td>basic stuff</td>
      <td>1</td>
    </tr>
    <tr>
      <td>MX</td>
      <td>more stuff</td>
      <td>0</td>
    </tr>
    <tr>
      <td>CNAME</td>
      <td>complicated stuff</td>
      <td>1</td>
    </tr>
  </tbody>
</table>
<br>
<br>
<hr>
<input onchange="filterme()" type="checkbox" name="type" value="MX">MX
<input onchange="filterme()" type="checkbox" name="type" value="A">A
<input onchange="filterme()" type="checkbox" name="type" value="CNAME">CNAME
<hr>
<input onchange="filterme()" type="checkbox" name="free" value="0">0
<input onchange="filterme()" type="checkbox" name="free" value="1">1

JavaScript

// Code goes here

$(function() {
  otable = $('#dt').dataTable();
})

function filterme() {
alert('test');
  //build a regex filter string with an or(|) condition
  var types = $('input:checkbox[name="type"]:checked').map(function() {
    return '^' + this.value + '\$';
  }).get().join('|');
  //filter in column 0, with an regex, no smart filtering, no inputbox,not case sensitive
  otable.fnFilter(types, 0, true, false, false, false);

  //build a filter string with an or(|) condition
  var frees = $('input:checkbox[name="free"]:checked').map(function() {
    return this.value;
  }).get().join('|');
  //now filter in column 2, with no regex, no smart filtering, no inputbox,not case sensitive
  otable.fnFilter(frees, 2, false, false, false, false);
}