TRI MULTI-COLONNES D'UN TABLEAU HTML

Commentaire de Khannibal le 10/11/2005 10:15:11

Tres beau script.
Je voulais m'en servir pour trier mon tableau mais j'ai un gros probleme :

<td align="left">        
<input id="res_id" name="res_id" type="hidden" value="<?php echo ($this->GetInfo(CL_L)); ?>">
<input id="res_nom" name="res_nom" type="submit" class="btnom" value="<?php echo $this->GetInfo(NM_L);?>" onmouseover="return escape('<?php $this->GetToolTip();?>')">    
</td>

Apres quelques petites modifs (mineures) le tri a l'écran fonctionne mais mon formulaire et le onmouseover ne fonctionne plus :'(

Si vous avez une idée suis prenneur.
Merci

Commentaire de bultez le 10/11/2005 10:37:37

salut Khannibal,
là, ce qui est donné, c'est le php, donc comme
on  ne sait pas ce qu'il y a dans les variables ...
impossible de répondre. De plus si le tri fonctionne,
quel peut-être le rapport avec ce onmouseover ou le
formulaire ? là aussi difficile de répondre, sans plus
de billes.
ce que tu peux faire : m'envoyer, par mail, la page
html générée ( pas le php hein ! la page telle qu'elle
est affichée chez le client ), ou mieux : poser la
question sur le forum JavaScriptFR. ( pas trop grosse
la page, l'extrait nécessaire seulement )         @+

Commentaire de Evangun le 13/07/2006 00:42:42

Bonjour Bultez,
merci bcp pour ce script simple que j'ai pu adapter sur mon site.
Je me demandais s'il y aurait un moyen que la première ligne (<th></th>) ne soit pas traitée comme les autres (<tr></tr>), pour qu'elle puisse servir de titre à chaque colonne? sinon il faut la construire à part et si le tableau est déformé, ça ne colle plus...
et merci encore.

Commentaire de Evangun le 20/07/2006 03:15:04

Oui, changer le 2ème for marche effectivement! merci! :)

Commentaire de f0k3ry le 12/06/2007 16:26:45

Hum, lorsque j'utilise ton exemple tout marche nickel mais lorsque je dois le transposer sur mon code j'ai quelques problèmes. Je suis novice en html mais actuellement en stage et on me demande du taf dans cette spécialités. En fait j'ai un tableau avec plusieurs colonnes et je veux pouvoir les trier, donc j'ai foutu un 2 pti png (ascendant/descendant) mais lorsque je click dessus, rien ne se passe. Voici un extrait de l'instruction:

<span class="Style17" onclick="trier(suivi,2,d)"><img src='img/fleche_bas.png' /></span><span class="Style17" onclick="trier(suivi,2,a)"><img src='img/fleche_haut.png' /></span><br />

J'espère que cet extrait suffira. Merci d'avance a bientot.

Commentaire de f0k3ry le 12/06/2007 16:47:15

Merci beaucoup de ta rapidité de réponse, je regarde ça de suite et je reviens vers le forum.

Commentaire de f0k3ry le 12/06/2007 16:52:14

Voila j'ai fait ce que tu m'as dit, et je trouve ça: "suivi not defined" ce qui veut dire que mon tableau n'aurait pas d' ID ou en tout cas que ce ne soit pas ce nom la, pourtant:

<table width="143%" border="2" cellpadding="0" cellspacing="0" id="suivi">

Merci d'avance.

Commentaire de bultez le 13/06/2007 06:38:17

si tu ne trouves pas, m'envoyer la page,
ici pour me joindre : http://mas.keo.in/?Bul (pour mail sans spams)
on mettra le pourquoi du comment ici.
Cordialement.

Commentaire de f0k3ry le 18/06/2007 10:27:22

Toujours ce "suivi is not defined" dans la console d'erreur sur FF, sur IE un message apparait: "Cet objet ne gère pas cette propriété ou cette methode", en faisant le debogage le bug serait a cette ligne:
var TabCol=colonnes.split(";");  // format : n°,type:taille;n°;...n°
mon appel serait peut etre donc mal fait, désolé j'ai un peu de mal avec ce langage...

Commentaire de f0k3ry le 18/06/2007 10:56:18

Je regarde ça de suite.

Commentaire de bultez le 18/06/2007 11:19:13

normal.
( oui je sais c'esxs agaçant de lire ça ... )
onclick="trier(document.getElementById('suivi'),1,'d');" />
sinon javascript tente d'utiliser la variable suivi
( puisque sans ' ou sans " )... qui est inconnue
tant qu'à document.getElementById("suivi")
les navigateurs se pomment dans les "
@+

Commentaire de f0k3ry le 18/06/2007 11:32:50

Ok Ok, je continue egalement avec de l'aide exterieure. Je te garde au courant. Merci.

Commentaire de f0k3ry le 19/06/2007 11:54:31

Sorry oublie de fermer une parenthese:

( <script> var nom_var_tab = document.getElementById("id_tableau"); </script> ).

Commentaire de f0k3ry le 20/06/2007 11:57:51

Oui probleme avec les dates mais que avec IE comme navigateur, sous FF cest nickel :). Par contre jai du modif un peu le js aussi pour les dates j'avais oublie de le preciser. En effet ton tri se fait sur le code entier des champs du tableau et non sur la valeur dans la case seulement, il faut donc bien harmoniser son code pour les chaine et entiers, mais surtout modifier le javascript pour qu'il puisse mettre dans l'ordre les date sous la forme aaaammjj. Pour mon exemple:

code html:     <td><div align="center" class="Style13">03/09/2006</div></td>

on fait un petit peu de calcul et on trouve donc que apres <td> l'annee est a la place 42, le mois 39 et le jour 36.
j'ai donc du modifier le script js comme suit:

code js initial:    Zone=Zone.substr(6,4) +
                         Zone.substr(3,2) +
                         Zone.substr(0,2);  // mise en forme aaaammjj

code js modifié:    Zone=Zone.substr(42,4) +
                         Zone.substr(39,2) +
                         Zone.substr(36,2);  // mise en forme aaaammjj

Voila. Si tu as une idée pour rendre compatible le tri des dates sous IE tiens moi au courant stp.

A plus.

Commentaire de f0k3ry le 21/06/2007 10:51:40

Ok, je vais essayer avec cette maniere. Je te tienns au courant :). Merci.

Commentaire de bultez le 21/06/2007 11:44:02

>>th rend gras le contenu de la cellule, j'ai donc pas retenu ton idee.
ben... et utiliser un style ou la classe pour définir ce qui te convient ?
( text-decoration, font ... ) dans un th
ou ( text-align... ) dans un td ( ou ton align=center bien sûr. )

>>Apparemment il a pas du aimer les balises <div>. ;)
"c'est pas ça". c'est qui si tu mets un div dans le td, ben... il y est.
le contenu n'est pas égal à "jj/mm/aaaa" mais à "<div...>jj/mm/aaaa</div>"

Commentaire de f0k3ry le 25/06/2007 12:09:42

Hehe apparament ca ne marche pas quand on change l'instruction au moment du rechargement du tableau, mais ca marche lorsque l'instruction est:

tableau.rows[l].cells[c-1].innerHTML = buffer[l][c];

Mais, dans ce cas la le tri croissant ne fonctionne plus, il faudrait donc peut etre que je separe les instructions. Le probleme restant: je n'ai pas compris pourquoi il y avait un probleme, donc je vais encore essayer de chercher meme si ca a l'air de marcher j'aimerais comprendre le pourquoi.

A plus.

Commentaire de f0k3ry le 25/06/2007 12:48:24

Bon bah voila, petite solution apportee:

   buffer.sort(); // trier    

    if (sens.charAt(0).toLowerCase()!="a") // inversion si non= A[scendant]
   { buffer.reverse();
   for( l = 2; l < ligfin; l++ ) // "recharger" le tableau htm
           { for ( c=1;c<=colfin;c++ )
        { tableau.rows[l].cells[c-1].innerHTML = buffer[l][c]; }  } }
else
{
for( l = 2; l < ligfin; l++ ) // "recharger" le tableau htm
           { for ( c=1;c<=colfin;c++ )
        { tableau.rows[l].cells[c-1].innerHTML = buffer[l-2][c]; }  } } }  

Comme ca ca marche, mais je n'ai toujours pas compris pourquoi lors du rechargement d'un tri decroissant l'instruction n'est pas la meme. J'attends de l'aide si possible pour m'expliquer ca, si je le trouve avec une source exterieur je posterias la reponse.

Merci Bultez pour le code ;).

Commentaire de f0k3ry le 25/06/2007 12:56:19

Hum j'ai pas bien compris je ne vois aucun § dans la source, je vais manger et je continue ca.  A tout ;)

Commentaire de f0k3ry le 25/06/2007 14:22:55

Ok merci je regarde ca.

Commentaire de bultez le 25/06/2007 15:07:24

mea culpa... voila ce que cest que d'aller trop vite...
tout n'était pas dit, il manque quelques indications
( en fait partout où l'on se sert de buffer !
  remplacer buffer[l][c] par buffer[l-2][c]
  si 2 lignes de titres )
je remet à jour...

Commentaire de f0k3ry le 25/06/2007 15:48:39

Ok bah c'est cool merci, ca marche et tout lol :).

A bientot Bultez et merci encore.

Commentaire de f0k3ry le 25/06/2007 16:06:51

Sans probleme :). De plus ca ma fait progresser en html et js, du moins un petit peu.

A bientot.

Commentaire de bultez le 06/11/2008 11:26:05

parce que le type de tri pour cette colonne
n'est pas correct, probablement.

appel : trier( tableau à trier,
                  "colonnes",    
                  "sens",
                  Nbr Lignes de Titres à ne pas trier 0 par défaut);

colonnes : n° [,type[:taille]][;n°[,type[:taille]]...]
                 Type actuellement possibles ( C par défaut )
                    c            Caractères
                    jj/mm/aaaa   Date jj/mm/aaaa
                    jjmmaaaa     Date jjmmaaaa
                    e:taille     Entier:nbr caractères maxi

pas grand chose à modifier s'il y a des décimales

@+

Commentaire de bultez le 06/11/2008 11:58:35

nickel si ça baigne
quand au temps de réponse, j'étais là,
un message me parvient quand quelqu'un
met un commentaire, que je soupçonnais
d'où ça venait...
cette ligne "colonne" n'est "pas si simple"
peut-être devrais-je refaire avec un format
    d'appel du style { ...id:"valeur"... }
@+

Commentaire de fyav le 09/12/2008 17:17:44

bonjour, je me permet de poster une modification pour l'exemple html :
- ajout d'une première ligne de tableau en javascript pour trier
- possibilité de trier sur des "commentaires" donc des valeurs qui ne sont pas "affichées"

fichier exemple.html :
<HTML>
<HEAD>
<TITLE>Tri tableaux HTML</TITLE>
<script> var nom_var_tab = document.getElementById("id_tableau"); </script>

<!-- ....... recopier le reste du fichier d'origine jusqu'au point suivant ..... -->

<!-- première ligne du tableau (qui ne sera pas triée) -->
<tr>
<td align="center">
<A href=# style="text-decoration:none"> <span onclick="trier(document.getElementById('tabl'),'0,e:10','d','1');">&#9660;</span></a>
<A href=# style="text-decoration:none"> <span onclick="trier(document.getElementById('tabl'),'0,e:10','a','1');">&#9650;</span></a>
</td>
<td align="center">
<A href=# style="text-decoration:none"> <span onclick="trier(document.getElementById('tabl'),'1,e:20','d','1');">&#9660;</span></a>
<A href=# style="text-decoration:none"> <span onclick="trier(document.getElementById('tabl'),'1,e:20','a','1');">&#9650;</span></a>
</td>
<td align="center">
<A href=# style="text-decoration:none"> <span onclick="trier(document.getElementById('tabl'),'2,jj/mm/aaaa','d','1');">&#9660;</span></a>
<A href=# style="text-decoration:none"> <span onclick="trier(document.getElementById('tabl'),'2,jj/mm/aaaa','a','1');">&#9650;</span></a>
</td>
<tr><td>55</td>  <td><!-- 10012.50 -->menu : 12.50 ¤</td>  <td>23/01/2005</td></tr>
<tr><td>1</td>   <td><!-- 10010.00 -->menu : 10 ¤</td> <td>03/03/2001</td></tr>
<tr><td>3</td>   <td><!-- 10010.50 -->menu : 10.50 ¤</td><td>01/01/2005</td></tr>
<tr><td>4444</td><td><!-- 20012.50 -->carte : 12.50 ¤</td><td>23/11/2004</td></tr>
<tr><td>22</td>  <td><!-- 20010.00 -->carte : 10 ¤</td> <td>08/09/1999</td></tr>
<tr><td>1</td>   <td><!-- 20010.50 -->carte : 10.50 ¤</td><td>17/02/2000</td></tr>
<tr><td>1</td>   <td><!-- 20009.50 -->carte : 9.50 ¤</td><td>03/03/2001</td></tr>
<tr><td>4444</td><td><!-- 10009.00 -->menu : 9 ¤</td><td>23/01/2000</td></tr>
<tr><td>4444</td><td><!-- 10009.50 -->menu : 9.50 ¤</td><td>23/01/2000</td></tr>
</table>

<!-- .... et recopier le reste ... -->

fin du fichier exemple.html

les commentaires dans la 2ème colonne permet de trier les prix par "menu" puis par "carte"