Afficher un message en début de tri d'un tableau
Bonjour
J'ai fais un tableau en PHP avec du JS, mais j'ai le message de tri en cours qui se met à la fin du tri, donc qui ne sert à rien, j'essais de le mettre au debut mais ça ne fonctionne pas...
si quelqu'un pouvait regarder :)
HTML:
Code:
<input type="text" id="AffichageTri" class="affichage-tri" readonly>
PHP:
Code:
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
| echo "<div class='table-conteneur'>";
echo "<table class='table-scrollable'>";
echo "<thead>";
echo "<tr id='header-row-container'>"; // Ligne d'en-têtes
echo "<th>Ligne</th>";
echo "<th>département Utilisateur</th>";
echo "<th>Nom de l'utilisateur</th>";
echo "<th>Nom de l'ordinateur</th>";
echo "<th>Nom du Logiciel</th>";
echo "<th>Version du Logiciel</th>";
echo "<th>N° de serie du Logiciel</th>";
echo "<th>Licences: Clés - Informations - Modifications</th>";
echo "<th>Systeme d'exploitation</th>";
echo "<th>Numéro de ticket</th>";
echo "<th>Date d'installation</th>";
echo "<th>Verification</th>";
echo "<th>Commentaires</th>";
echo "</tr>";
echo "</thead>";
***********************
// Message de tri en cours
echo "<div id='loadingMessage' style='display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.8); padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); z-index: 9999;'>Tri en cours...</div>";
echo "<tr id='header-row-container'>"; // Ligne d'en-têtes ( ID pour les entêtes ) |
Script:
Code:
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 |
d'autant que j'aimerais bien que le message s'efface après le tri et non après un timer déterminé
Merci
