Filtering multicheckbox on datable
i have a problem with my code, i try to make a datable with multiple checkbox filter on Django environement.
i have tried multiple code, but for now, i have this code, for each collumn there is a list and i can check or not the checkbox, but the filter is not applicated.
any suggestion would be very welcome.
here the code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.2.3/css/fixedHeader.dataTables.min.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.dropdown-menu {
max-height: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<h1>Liste des matches</h1>
<table id="table_id" class="display">
<thead>
<tr>
<th>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownPAYSEQP" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
PAYSEQP
</button>
<div class="dropdown-menu" aria-labelledby="dropdownPAYSEQP">
{% for match in matches %}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="{{ match.PAYSEQP }}" id="{{ match.PAYSEQP }}">
<label class="form-check-label" for="{{payseqp}}">
{{ match.PAYSEQP }}
</label>
</div>
{% endfor %}
</div>
</div>
</th>
<th>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownJOUEURS" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
JOUEURS
</button>
<div class="dropdown-menu" aria-labelledby="dropdownJOUEURS">
{% for match in matches %}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="{{ match.JOUEURS }}" id="{{ match.JOUEURS }}">
<label class="form-check-label" for="{{joueur}}">
{{ match.JOUEURS }}
</label>
</div>
{% endfor %}
</div>
</div>
</th>
<th>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownNMATCHS" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
NMATCHS
</button>
<div class="dropdown-menu" aria-labelledby="dropdownNMATCHS">
{% for match in matches %}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="{{ match.NMATCHS }}" id="{{ match.NMATCHS }}">
<label class="form-check-label" for="{{nmatch}}">
{{ match.NMATCHS }}
</label>
</div>
{% endfor %}
</div>
</div>
</th>
<th>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMINTOTAL" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MINTOTAL
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMINTOTAL">
{% for match in matches %}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="{{ match.MINTOTAL }}" id="{{ match.MINTOTAL }}">
<label class="form-check-label" for="{{mintotal}}">
{{ match.MINTOTAL }}
</label>
</div>
{% endfor %}
</div>
</div>
</th>
</tr>
</thead>
<tbody>
{% for match in matches %}
<tr>
<td>{{ match.PAYSEQP }}</td>
<td>{{ match.JOUEURS }}</td>
<td>{{ match.NMATCHS }}</td>
<td>{{ match.MINTOTAL }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready(function(){
$(document).ready(function() {
var table = $('#table_id').DataTable();
$('input[type="checkbox"]').on('change', function() {
var colIndex = $(this).closest('th').index();
var values = [];
$('input[type="checkbox"]:checked').each(function() {
values.push($(this).val());
});
if (values.length > 0) {
table.column(colIndex).search(values.join('|'), true, false).draw();
} else {
table.column(colIndex).search('').draw();
}
});
});
</script>
</body>
</html>
it's been two day 'im struggling with this.
thanks you for the help !