|
|
|
|
@ -22,6 +22,7 @@
@@ -22,6 +22,7 @@
|
|
|
|
|
<table id="coureursTable" class="table table-bordered table-striped"> |
|
|
|
|
<thead> |
|
|
|
|
<tr> |
|
|
|
|
<th class="select-checkbox"></th> |
|
|
|
|
<th>Nom</th> |
|
|
|
|
<th>Prénom</th> |
|
|
|
|
<th>Classe</th> |
|
|
|
|
@ -30,6 +31,7 @@
@@ -30,6 +31,7 @@
|
|
|
|
|
<tbody> |
|
|
|
|
{% for c in coureurs %} |
|
|
|
|
<tr data-id="{{ c.id }}"> |
|
|
|
|
<td class="select-checkbox"></td> |
|
|
|
|
<td>{{ c.nom }}</td> |
|
|
|
|
<td>{{ c.prenom }}</td> |
|
|
|
|
<td>{{ c.classe }}</td> |
|
|
|
|
@ -90,59 +92,112 @@
@@ -90,59 +92,112 @@
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<style> |
|
|
|
|
.dt-select-info span:contains('colonne'), |
|
|
|
|
.dt-select-info span:contains('cellule') { |
|
|
|
|
display: none !important; |
|
|
|
|
} |
|
|
|
|
table.dataTable tbody td.select-checkbox { |
|
|
|
|
cursor: pointer; |
|
|
|
|
position: relative; |
|
|
|
|
} |
|
|
|
|
table.dataTable tr.selected td.select-checkbox:after { |
|
|
|
|
content: '\2714'; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 50%; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
color: #007bff; |
|
|
|
|
font-size: 1.2em; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
<link rel="stylesheet" href="{% static 'datatables/select.dataTables.min.css' %}" /> |
|
|
|
|
{% block extra_js %} |
|
|
|
|
<script src="{% static 'jquery/jquery-3.6.0.min.js' %}"></script> |
|
|
|
|
<script src="{% static 'bootstrap/bootstrap.bundle.min.js' %}"></script> |
|
|
|
|
<script src="{% static 'jquery/jquery.dataTables.min.js' %}"></script> |
|
|
|
|
<script src="{% static 'bootstrap/dataTables.bootstrap4.min.js' %}"></script> |
|
|
|
|
<script src="{% static 'datatables/dataTables.select.min.js' %}"></script> |
|
|
|
|
<script src="{% static 'jquery/datatables.fr.js' %}"></script> |
|
|
|
|
<script> |
|
|
|
|
$(document).ready(function() { |
|
|
|
|
// Empêche la double initialisation de DataTables |
|
|
|
|
var table; |
|
|
|
|
$(function() { |
|
|
|
|
if (!$.fn.DataTable.isDataTable('#coureursTable')) { |
|
|
|
|
table = $('#coureursTable').DataTable({ |
|
|
|
|
var table = $('#coureursTable').DataTable({ |
|
|
|
|
pageLength: 50, |
|
|
|
|
initComplete: function (settings, json) { |
|
|
|
|
table.rows().select(); |
|
|
|
|
}, |
|
|
|
|
select: { |
|
|
|
|
style: 'multi', |
|
|
|
|
selector: 'td.select-checkbox' |
|
|
|
|
}, |
|
|
|
|
info: false, |
|
|
|
|
order: [[1, 'asc']], |
|
|
|
|
columnDefs: [ |
|
|
|
|
{ orderable: false, className: 'select-checkbox', targets: 0 } |
|
|
|
|
], |
|
|
|
|
language: { |
|
|
|
|
url: "https://cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json" |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
table = $('#coureursTable').DataTable(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function updateMainDossardsCount() { |
|
|
|
|
var count = table.rows({search:'applied'}).count(); |
|
|
|
|
$('#mainDossardsCountText').text('Générer ' + count + ' dossards'); |
|
|
|
|
} |
|
|
|
|
updateMainDossardsCount(); |
|
|
|
|
table.on('draw', updateMainDossardsCount); |
|
|
|
|
$('#filterClasse').on('change', updateMainDossardsCount); |
|
|
|
|
$('#filterClasse').on('change', function() { |
|
|
|
|
var val = $(this).val(); |
|
|
|
|
if(val) { |
|
|
|
|
table.column(2).search('^'+val+'$', true, false).draw(); |
|
|
|
|
} else { |
|
|
|
|
table.column(2).search('').draw(); |
|
|
|
|
// Sélection/désélection totale via l'entête (exemple officiel) |
|
|
|
|
$('#coureursTable thead').on('click', 'th.select-checkbox', function() { |
|
|
|
|
if (table.rows({selected: true, search:'applied'}).count() === table.rows({search:'applied'}).count()) { |
|
|
|
|
table.rows({search:'applied'}).deselect(); |
|
|
|
|
} else { |
|
|
|
|
table.rows({search:'applied'}).select(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// Sélection individuelle par clic sur la case (exemple officiel) |
|
|
|
|
$('#coureursTable tbody').on('click', 'td.select-checkbox', function(e) { |
|
|
|
|
e.stopPropagation(); |
|
|
|
|
var row = table.row($(this).closest('tr')); |
|
|
|
|
if (row.selected()) { |
|
|
|
|
row.deselect(); |
|
|
|
|
} else { |
|
|
|
|
row.select(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// Affichage du compteur |
|
|
|
|
function updateMainDossardsCount() { |
|
|
|
|
var count = table.rows({selected: true, search: 'applied'}).count(); |
|
|
|
|
$('#mainDossardsCountText').text('Générer ' + count + ' dossards'); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
table.on('select deselect draw', updateMainDossardsCount); |
|
|
|
|
updateMainDossardsCount(); |
|
|
|
|
|
|
|
|
|
// Ouvre le modal au clic sur le bouton |
|
|
|
|
$('#openDossardsModal').on('click', function(e) { |
|
|
|
|
e.preventDefault(); |
|
|
|
|
$('#dossardsModal').modal('show'); |
|
|
|
|
}); |
|
|
|
|
// Filtre classe (colonne 3) |
|
|
|
|
$('#filterClasse').on('change', function() { |
|
|
|
|
var val = $(this).val(); |
|
|
|
|
if(val) { |
|
|
|
|
table.column(3).search('^'+val+'$', true, false).draw(); |
|
|
|
|
} else { |
|
|
|
|
table.column(3).search('').draw(); |
|
|
|
|
} |
|
|
|
|
table.rows({search:'applied'}).select(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// Prépare la soumission du formulaire pour n'envoyer que les IDs filtrés |
|
|
|
|
$('#dossardsForm').on('submit', function(e) { |
|
|
|
|
var ids = []; |
|
|
|
|
table.rows({search:'applied'}).every(function(){ |
|
|
|
|
var row = this.node(); |
|
|
|
|
var id = $(row).data('id'); |
|
|
|
|
if (id) ids.push(id); |
|
|
|
|
// Ouvre le modal au clic sur le bouton |
|
|
|
|
$('#openDossardsModal').on('click', function(e) { |
|
|
|
|
e.preventDefault(); |
|
|
|
|
$('#dossardsModal').modal('show'); |
|
|
|
|
}); |
|
|
|
|
$('#coureurIdsInput').val(ids.join(',')); |
|
|
|
|
// Ferme le modal juste après la soumission |
|
|
|
|
$('#dossardsModal').modal('hide'); |
|
|
|
|
// continue submit |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// Prépare la soumission du formulaire pour n'envoyer que les IDs sélectionnés |
|
|
|
|
$('#dossardsForm').on('submit', function(e) { |
|
|
|
|
var ids = []; |
|
|
|
|
table.rows({selected: true, search: 'applied'}).every(function(){ |
|
|
|
|
var row = this.node(); |
|
|
|
|
var id = $(row).data('id'); |
|
|
|
|
if (id) ids.push(id); |
|
|
|
|
}); |
|
|
|
|
$('#coureurIdsInput').val(ids.join(',')); |
|
|
|
|
$('#dossardsModal').modal('hide'); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
</script> |
|
|
|
|
{% endblock %} |
|
|
|
|
|
