JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<hr>
<p>
Region
</p>
<label>
<input type="checkbox" name="region" value="North West">North West</label>
<label>
<input type="checkbox" name="region" value="Yorkshire and Humber">Yorkshire and
Humber</label>
<label>
<input type="checkbox" name="region" value="North East">North East</label>
<label>
<input type="checkbox" name="region" value="West Midlands">West Midlands</label>
<label>
<input type="checkbox" name="region" value="East Midlands">East Midlands</label>
<label>
<input type="checkbox" name="region" value="London">London</label>
<label>
<input type="checkbox" name="region" value="East England">East England</label>
<label>
<input type="checkbox" name="region" value="South East">South East</label>
<label>
<input type="checkbox" name="region" value="South West">South West</label>
<label>
<input type="checkbox" name="region" value="Wales">Wales</label>
<label>
<input type="checkbox" name="region" value="Northern Ireland">Northern Ireland</label>
<label>
<input type="checkbox" name="region" value="Scotland">Scotland</label>
<hr>
<table id="table-candidates-list" class="display" style="width: 100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Date of birth</th>
<th>Date of registration</th>
<th>Status</th>
<th class="hidden">Region</th>
<th class="hidden">Salary</th>
<th class="hidden">Skills</th>
</tr>
</thead>
...
JavaScript
$(document).ready(function() {
var table = $('#table-candidates-list').dataTable({
responsive: true,
"info": false,
"pagingType": "numbers",
"columnDefs": [
{
"targets": [5],
"visible": false
},
{
"targets": [6],
"visible": false
},
{
"targets": [7],
"visible": false
},
]
});
$('input:checkbox').on('change', function () {
table.fnDraw();
});
$.fn.dataTable.ext.search.push(
function (settings, searchData, index, rowData, counter) {
var region = $('input:checkbox[name="region"]:checked').map(function () {
return this.value;
}).get();
if (region.length === 0) {
return true;
}
if (region.indexOf(searchData[5]) !== -1) {
return true;
}
return false;
}
);
});