https://code.jquery.com/jquery-3.3.1.js
by andrebertonha
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
$(function() {
otable = $('#dataTableClientes').dataTable();
});
function filterme() {
var types = $('input:checkbox[name="site"]:checked').map(function() {
return this.value === 'on' ? 'S' : 'N';
}).get().join('|');
otable.fnFilter(types, [5], true, false, false, false);
var valueBoca = $('input:checkbox[name="boca"]:checked').map(function() {
return this.value === 'on' ? 'S' : 'N';
}).get().join('|');
otable.fnFilter(valueBoca, [6], true, false, false, false);
var valueFace = $('input:checkbox[name="face"]:checked').map(function() {
return this.value === 'on' ? 'S' : 'N';
}).get().join('|');
otable.fnFilter(valueFace, [7], true, false, false, false);
var valueIndica = $('input:checkbox[name="indica"]:checked').map(function() {
return this.value === 'on' ? 'S' : 'N';
}).get().join('|');
otable.fnFilter(valueIndica, [8], true, false, false, false);
}
</script>
<div class="container" style="width:100%;">
<div class="table-wrapper table-responsive">
<div class="table-title">
<h2><b>Clientes</b></h2>
<h4>Filtros</h4>
<fieldset>
<label>Origem</label>
<div class="form-group">
<input type="checkbox" onchange="filterme()" name="site" id="site"> Site
<input type="checkbox" onchange="filterme()" name="boca" id="boca"> Boca a boca
<input type="checkbox" onchange="filterme()" name="face" id="face"> Facebook
<input type="checkbox" onchange="filterme()" name="indica" id="indica"> Indicação
...