JSFiddle - React, Tailwind, and code Playground

by tomas_eklund

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<h3>Custom filter "bug" in DataTables v1.10</h3>

<p>
    <label>
        <input type="checkbox" class="filter" value="Tokyo" />Tokyo</label>
    <label>
        <input type="checkbox" class="filter" value="London" />London</label>
</p>
<p>There is a hidden column for the checkbox-based filtering. Also try searching for "London" or "Tokyo" using the Search box - results should only be based on visible data, not on the hidden column. This demo works with dataTables v1.9.0, but the checkbox based search breaks in v1.10.0 and later because bSearchable applies to custom searching also.</p>
<ul>
    <li>https://cdn.datatables.net/1.9.0/js/jquery.dataTables.min.js (demo works)</li>
    <li>https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js (demo breaks)</li>
</ul>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th class="hidden nosearch">Office</th>
            <th>Name</th>
            <th>Position</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Office</th>
            <th>Name</th>
            <th>Position</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Edinburgh</td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Tokyo</td>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>San Francisco</td>
            <td>Ashton...

CSS

p {
    color: green;
}
p>label {
    text-decoration: underline;
    cursor: pointer;
}
th {
    text-align: left;
}

JavaScript

var table = $('#example').dataTable({
    aoColumnDefs: [{
        aTargets: ['hidden'],
        bVisible: false
    }, {
        aTargets: ['nosearch'],
        bSearchable: false
    }],
    sPaginationType: 'full_numbers'
});

$('input.filter').on('change', function () {
    var filter = [];
    $('.filter').each(function (index, elem) {
        if (elem.checked) filter.push($(elem).val());
    });
    var filterString = filter.join('|');
    table.fnFilter(filterString, 0, true, false, false);
});