[Résolu] Trier les lignes de tableaux via un select

Bonjour,

étant débutant en JS, j'essaye de trouver une façon de trier les lignes d'un tableaux (nombre de lignes variable) par ordre alphabétique de a à z, et l'inverse ainsi que par date d'ajout, du plus récent au plus ancien et aussi l'inverse. Le tout via un select...(On choisis une option de tri dans le select et ça tri les lignes en fonction)

Si qql un pourrai m'aider ça serait cool de votre part, merci !

Salut

Pour le tri, tu as "sort" dans quasi tout langage, fonctionnalité de base

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/sort

Salut !
Merci pour ta réponse, oui j'avais trouvé cette solution et c'est ce que je vais utiliser, mais le problème c'est je ne peux pas savoir le nombre de ligne du tableau, ni des valeurs, donc je dois les récupérer via une boucle (je dis pas de conneries ?), Laquelle,je ne sais pas par contre, et je ne connais pas la façon dont il faut procéder pour récupérer seulement une valeur par ligne (évidemment, la même "sorte" genre le "nom" pour toutes les lignes sinon c'est pas un tri) sachant que le nombre de ligne vari... saurais tu m'aiguiller un peu?

Saurais tu aussi comment je pourrais faire (ça doit être tout con mais en tant que débutant sur Java script...) Un changement de couleur d'une ligne complète 1 fois sur deux en js ?
Je l'ai fais en PHP, hors, comme ça demande un rechargement, si je met du Java pour trier ça doit plus faire un sur deux selon le nom? ????
Merci beaucoup !

Salut,

Attention !! Javascript c'est en un seul mot, et ce n'est pas le même langage que le Java !!

Quand tu parles d'un tableau c'est quoi exactement ? un tableau javascript (Au départ après ton 1er message je pensais que c'était ça, après le second, j'ai l'impression qu'en fait non ) ? Ou c'est un tableau html (table tr td)? (Ou un tableau php ?)

Le nombre de "lignes" (éléments) du tableau ne change rien à la fonction de tri, cela compare juste 2 éléments à la fois.

Pour le changement de couleur c'est juste du css selon que c'est une ligne pair ou impair :

tr:nth-child(2n){
 background:yellow; 
}

tr:nth-child(2n+1){
 background:red; 
}

Et le jsfiddle qui va avec : https://jsfiddle.net/gsy9ahL8/

Edit : et pour si c'est bien une table que tu cherches à trier tu as un exemple ici : https://www.w3schools.com/howto/howto_js_sort_table.asp#myTable2
Modifié par Mathieuu (09 Mar 2020 - 15:38)

Bonjour,

si c'est pour trier des tables html, il y a déjà des solutions prêtes à l'emploi pour cela, par exemple:

En version simple
http://tristen.ca/tablesort/demo/

En version très avancées avec 20 000 options et un poids conséquent:
https://datatables.net

Le faire soi-même est assez complexe, et je déconseille à un débutant de se lancer là-dedans.

Bonsoir à vous, merci pour vos réponses !
Pour le changement de couleur avec le css c'est nickel ! et dire que je cherchais à le faire en php ce qui cause des soucis si on tri par la suite avec le JS (niveau chargement de la page, vous devez mieux le savoir que moi xD)

En fait, j'ai :
<table summary="" id="table_salarié" class="table">
<thead>
<tr class="entete">
<th id="nom" class="colonne">Nom</th>
<th class="colonne">Prénom</th>
<th class="colonne">Age</th>
<th class="colonne">adresse</th>
<th class="colonne">Spécialité</th>
<th class="colonne">Jour(s) posé(s)</th>
<th class="colonne">Congé(s) restant(s)</th>
<th class="colonne">Cumul heures supp.</th>
<th class="colonne">Tâche en cours</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $donnees['nom']; ?></td>
<td><?php echo $donnees['prenom']; ?></td>
<td><?php echo $donnees['age']; ?></td>
<td><?php echo $donnees['adresse']; ?></td>
<td><?php echo $donnees['specialite']; ?></td>
<td><?php echo $donnees['jours_poses']; ?></td>
<td><?php echo $donnees['jours_conges']; ?></td>
<td><?php echo $donnees['heures_supp']; ?></td>
<td><?php echo $donnees['heures_supp']; ?></td>
</tr>
</tbody>
</table>

voila...
le nombre de tr sera en fonction de ce qu'entre l'utilisateur, je m'explique...
c'est pour faire un planning, donc ceci est pour entrer des salariés, toutes entreprises ont des salariés, divers nombre etc... et j'aimerai pouvoir afficher les salariés trié de a a z, de z a a, de la date d'ajout (du plus récent au plus ancien et inversement) (sachant que j'aimerai passer par un select pour pouvoir trier, je pense donc que le switch, case 1, case 2, ... avec des break est la bonne solution? avec le code de la façon de trier dans le cas voulu?)

Est-ce plus clair?

Pouvez vous m'expliquer la différence entre trier les table complètes et juste les tr entre elles d'une seule table ?

Merci encore !

Salut,

je ne comprends pas bien l’intérêt de vouloir passer par un select pour trier le tableau. Cela me semble plus simple/intuitif de cliquer directement sur le th qui va bien.

Je pense que tu gagneras du temps à utiliser les solutions déjà toutes faites que t'a proposé kustolovic. La solution simple semble pratique à mettre en place en nécessitant assez peu de modifications.

Ensuite je ne comprends pas la dernière question. Pour trier une table complète tu vas devoir trier les tr 2 à 2, mais au final cela revient au même.

Bonsoir, oui je vais me pencher sur la version simplifié pour l'instant.
En fait, je voudrai passer par les options d'un select pour choisir la façon de trier, comme sur les sites de commerce "filtrer : prix croissant" etc etc... mais en triant et non pas filtrer.
D'accord, je pensais que deux tables trié donnait un résultat différent que simplement les tr.
Merci pour vos réponses et votre aide

Salut, je te propose de commencer à te former sur du Javascript, et au fur et à mesure que le langage rentrera cela te paraitra plus intuitif. Pour l'instant c'est 1 poil trop compliqué par rapport à ton niveau (bien que le mien ne soit pas dément non plus).

Garde à l'esprit dans les grandes lignes:
-HTML pour structurer ta page : un corps
-CSS pour le styliser : les habits
-JavaScript pour le faire fonctionner/interagir: les fonctions nerveuses

Résolu