1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
| // Bloc de fonction pour trie
document.addEventListener("DOMContentLoaded", function() {
// Sélectionnez tous les en-têtes de colonne à l'intérieur de la ligne avec l'ID 'header-row-container'
var headers = document.querySelectorAll('#header-row-container th');
// Parcourir chaque en-tête de colonne et ajouter un écouteur d'événement de clic
headers.forEach(function(header, index) {
header.addEventListener("click", function() {
// Afficher le message de tri en cours
var affichageTri = document.getElementById("AffichageTri");
affichageTri.value = "Tri en cours, Veuillez patienter";
// Mettre à jour le champ 'AffichageTri' au début du tri
updateAffichageTriAfterSortStart(`Tri en cours de la colonne ${headers[index].innerText}
`);
// Lancer le tri du tableau (assurez-vous que la fonction trierTableau(index) est correctement définie et fonctionne)
trierTableau(index, function() {
// Cacher le message de tri après un court délai
setTimeout(function() {
affichageTri.value = ""; // Efface le message après le tri
}, 1000); // ajustez la durée selon vos besoins
});
});
});
});
// Fonction de trier le tableau
function trierTableau(columnIndex, callback) {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.querySelector('.table-scrollable tbody');
switching = true;
// Tri du tableau
while (switching) {
switching = false;
rows = table.rows;
for (i = 0; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("td")[columnIndex];
y = rows[i + 1].getElementsByTagName("td")[columnIndex];
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
// Appeler la fonction de rappel une fois le tri terminé
callback && callback();
}
// Fonction de rappel pour mettre à jour le champ 'AffichageTri' au début du tri
const updateAffichageTriAfterSortStart = (message) => {
const affichageTri = document.getElementById('AffichageTri');
affichageTri.value = message;
affichageTri.style.color = "#008000"; // Mettre le texte en vert
affichageTri.style.fontWeight = "bold"; // Mettre le texte en gras
};
// Fin de bloc de fonction pour tri |
Partager