JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div id="demo">
    <table border="0" cellspacing="5" cellpadding="5">
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" checked="checked" name="ckb-gradeA" id="ckb-gradeA" />grade A
                    <br />
                    <input type="checkbox" checked="checked" name="ckb-gradeC" id="ckb-gradeC" />grade C
                    <br />
                    <input type="checkbox" checked="checked" name="ckb-gradeU" id="ckb-gradeU" />grade U
                    <br />
                    <input type="checkbox" checked="checked" name="ckb-gradeX" id="ckb-gradeX" />grade X</td>
            </tr>
        </tbody>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
        <thead>
            <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Engine version</th>
                <th>CSS grade</th>
            </tr>
        </thead>
        <tbody>
            <tr class="gradeX">
                <td>Trident</td>
                <td>Internet Explorer 4.0</td>
                <td>Win 95+</td>
                <td class="center">4</td>
                <td class="center">X</td>
            </tr>
            <tr class="gradeC">
                <td>Trident</td>
                <td>Internet Explorer 5.0</td>
                <td>Win 95+</td>
                <td class="center">5</td>
                <td class="center">C</td>
            </tr>
            <tr class="gradeA">
                <td>Trident</td>
                <td>Internet Explorer 5.5</td>
                <td>Win 95+</td>
                <td...

JavaScript

/* Custom filtering function which will filter data in column four between two values */
$.fn.dataTableExt.afnFiltering.push(

function (oSettings, aData, iDataIndex) {
    var gA = $('#ckb-gradeA').is(':checked'),
        gC = $('#ckb-gradeC').is(':checked'),
        gU = $('#ckb-gradeU').is(':checked'),
        gX = $('#ckb-gradeX').is(':checked');

    var myRowClass = oSettings.aoData[iDataIndex].nTr.className;

    if (myRowClass === 'gradeA' || myRowClass === 'gradeA even' || myRowClass === 'gradeA odd') {
        return gA === true ? true : false;
    } else if (myRowClass === 'gradeC' || myRowClass === 'gradeC even' || myRowClass === 'gradeC odd') {
        return gC === true ? true : false;
    } else if (myRowClass === 'gradeU' || myRowClass === 'gradeU even' || myRowClass === 'gradeU odd') {
        return gU === true ? true : false;
    } else if (myRowClass === 'gradeX' || myRowClass === 'gradeX even' || myRowClass === 'gradeX odd') {
        return gX === true ? true : false;
    } else {
        return false;
    }
});

$(function () {
    /* Initialise datatables */
    var oTable = $('#example').dataTable();

    /* Add event listeners to the two range filtering inputs */
    $('#ckb-gradeA').change(function () {
        oTable.fnDraw();
    });
    $('#ckb-gradeC').change(function () {
        oTable.fnDraw();
    });
    $('#ckb-gradeU').change(function () {
        oTable.fnDraw();
    });
    $('#ckb-gradeX').change(function () {
        oTable.fnDraw();
    });
});