Discussion :

[draidius]

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

[ASCIIDEFOND]

Salut draidius,

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
setTimeout(function() {
document.getElementById('loadingMessage').innerHTML = ""; // Efface le message après le tri
}, 1000); // ajustez la durée selon vos besoins

[draidius]

Salut et merci ASCIIDEFOND

La modification de la ligne que tu m'a indiqué fonctionne donc je n'ai plus besoin du timer, j'ai effacé cette partie là

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

}, 1000); // ajustez la durée selon vos besoins

et ça fonctionne pour l'effacement du message, mais je voudrais l'avoir au début. ça serait plus logique

j'ai bientôt fini mon site, il me reste des modifs pour vérifications afin que les techs arrêtent de m'installer des licences dans tous les sens

[ASCIIDEFOND]

Afficher un message dans un balise <input> ce n'est pas très courant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" id="AffichageTri" class="affichage-tri" readonly>

Un message "Tri en cours..." existe déjà dans le code Php, pourquoi ne pas utiliser cette balise ?

Code Php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// 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>";

En remplaçant

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
            // Afficher le message de tri en cours
            var affichageTri = document.getElementById("AffichageTri");
            affichageTri.value = "Tri en cours, Veuillez patienter";

Par

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
            // Afficher le message de tri en cours
            var loadingMessage= document.getElementById("loadingMessage");
            loadingMessage.innerHtml= "Tri en cours, Veuillez patienter";
...
 
// Fonction de rappel pour mettre à jour le champ 'AffichageTri' au début du tri
const updateAffichageTriAfterSortStart = (message) => {
    var loadingMessage= document.getElementById('loadingMessage');
    loadingMessage.innerHtml= message;
    loadingMessage.style.color = "#008000"; // Mettre le texte en vert
    loadingMessage.style.fontWeight = "bold"; // Mettre le texte en gras
};

[draidius]

Bonjour
Donc en fait, je me suis aperçus que "id='loadingMessage'" dans le php etait utilisé nul par c'est le reste d'un ancien test que j'avais fait, donc je l'ai supprimé

et en fait j'ai toujours le message en fin de tri :/

Merci d'avoir essayé de m'aider

[NoSmoking]

Bonjour,
si tu veux que ton message de « wait » apparaisse bien avant d'être effacé il faut laisser le temps au moteur de rendu de faire son job donc de l'afficher.
Pour faire cela il te faut utiliser la méthode setTimeout qui va « différer » la suite de ton code et ainsi laisser le temps au moteur de rendu d’œuvrer.

Cela peut se traduire ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
// init du message écran
const elemWait = document.getElementById("msg-wait");
elemWait.textContent = "Tri colonne " + index + " en cours !"
elemWait.style.display = "block";
// donne la main au moteur de rendu en mettant la séquence sur le tas
setTimeout(() => {
  trierTable(index, sens);
  elemWait.style.display = "none";
}, 1);  // la valeur de delai importe peu, tu peux même mettre 0 voire rien