Ajouter un tri à un tableau en HTML
Ferméjordane45 Messages postés 38469 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 avril 2025 - 18 mai 2023 à 11:25
- Ajouter un tri à un tableau en HTML
- Trier un tableau excel - Guide
- Comment faire un tableau - Guide
- Tableau ascii - Guide
- Tableau croisé dynamique - Guide
- Comment imprimer un tableau excel sur une seule page - Guide
2 réponses
18 mai 2023 à 09:44
Bonjour
Le html n'étant pas un langage de programmation, il ne permet pas à lui seul de rechercher des informations dans un fichier texte ni de s'actualiser...
Je suppose donc que tu as également utilisé un autre langage, tel que du PHP...
Pour déclencher l'actualisation automatique, il te faudra en plus du JavaScript.
JavaScript qui pourrait éventuellement te servir à mettre en place le tri sur ton tableau.
Il existe une librairie déjà toute faite permettant de mettre en place facilement ce genre de choses... Il s'agit de tablesorter.js
18 mai 2023 à 09:50
Merci pour votre aide,
Effectivement je vous mets çi dessous la base de ma page html :
<?php
$test= file("liveresult.txt");
foreach($test as $line=>$value){
$value=utf8_encode($value);
$essai[] = explode($test[0][3],$value);
}
//print_r($essai[0]);
/*
Clt scratch : Colonne 33
Nom Prénom : Colonnes 0 + 1
Numéro dossard : Colonne 10
Temps : Colonne 28
Clt sexe : Colonnes 35 + 9
Clt Catégorie : Colonnes 34 + 17
Team / club : Colonne 19
Course : Colonne 26
*/
?>
<html>
<head>
<style style="text/css">
.scroll-up {
height: 700px;
overflow: hidden;
position: relative;
background: lightyellow;
color: red;
border: 2px solid red;
}
.scroll-up p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 100px;
text-align: center;
/* Starting position */
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
transform:translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 20s linear infinite;
-webkit-animation: scroll-up 20s linear infinite;
animation: scroll-up 50s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-up {
0% { -moz-transform: translateY(100%); }
100% { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
@keyframes scroll-up {
0% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
}
table tbody tr:nth-child(odd) { background-color: #d7d7d7; }
.flotte {
float:left;
}
</style>
<meta http-equiv="refresh" content="30">
</head>
<body>
<div align = "center"><FONT size="+2"><p>LIVE - RESULTATS PROVISOIRES</p></FONT></div>
</br>
</br>
<p><table width="100%">
<?php
echo "<tr>";
echo "<td><b>Scratch</b></td>";
echo "<td><b>Nom Prénom</b></td>";
echo "<td><b>Dossard</b></td>";
echo "<td><b>Temps</b></td>";
echo "<td><b>Clt Sexe</b></td>";
echo "<td><b>Clt Cat</b></td>";
echo "<td><b>Club / Team</b></td>";
echo "<td><b>Course</b></td>";
echo "</tr>";
?>
<?php
foreach($essai as $ligne => $value2)
{
if ($value2[33]!=0){
echo "<tr>";
echo "<td>".$value2[33]."</td>";
echo "<td><b>".$value2[0]."</b> ".$value2[1]."</td>";
echo "<td>".$value2[10]."</td>";
echo "<td>".$value2[28]."</td>";
echo "<td>".$value2[35]." ".$value2[9]."</td>";
echo "<td>".$value2[34]." ".$value2[17]."</td>";
echo "<td>".$value2[19]."</td>";
echo "<td>".$value2[26]."</td>";
echo "</tr>";
}
}
?>
</table></p>
</body>
</html>La source du tableau est un txt généré par un programme et copier en ftp, j'ai ajouté une actualisation mais celle ci actualise toute la page pas le but recherché car je souhaite actualiser et trier uniquement la partie tableau en toute transparence pour les visiteurs.
CR97480
18 mai 2023 à 10:02
Si tu veux trier ou actualiser le tableau sans recharger la page complète, tu vas devoir passer par de l'Ajax.
Le plugin tablesorter dispose d'une option pour alimenter les données du tableau en AJAX.
18 mai 2023 à 10:03
Je ne connais pas du ajax, c'est compliqué à mettre en œuvre ? Je suis vraiment novice la dedans
18 mai 2023 à 11:25
Non. l'ajax ce n'est pas compliqué.
C'est juste une "techno" qui mélange du Javascript et un langage serveur tel que du PHP.
Tu trouveras de nombreux tutos/exemples sur le net sans difficulté...
Et puis.. j'insiste.... regarde le plugin tablesorter !
https://mottie.github.io/tablesorter/docs/example-pager-ajax.html
