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 html : Sélectionner tout - Visualiser dans une fenêtre à part
<input type="text" id="AffichageTri" class="affichage-tri" readonly>
PHP:
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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