Partage
  • Partager sur Facebook
  • Partager sur Twitter

Trier un tableau

    28 avril 2009 à 12:50:25

    Bonjour,
    J'ai un tableau en HTML tout bête, de ce type là :

    <table>
     <thead>
      <th class="tableauDate">Date</th>					
      <th class="tableauTitreFlux">Site</th>					
      <th class="tableauTitreArticle">Titre de l'info</th>
     </thead>
     <tbody>
      <tr><td class="date">03-04-2009</td><td class="titreSite">monsite.com</td><td class="titreArticle">toto</td></tr>
      <tr><td class="date">30-03-2009</td><td class="titreSite">tonsite.com</td><td class="titreArticle">tati</td></tr>
      <tr><td class="date">24-04-2003</td><td class="titreSite">sonsite.com</td><td class="titreArticle">tata</td></tr>
     </tbody>
    </table>
    


    Il faudrait, que ce tableau (une fois généré) soit trié par date : les articles les plus récents en premier.
    J'aimerais le faire en javascript (tout en sachant, que je peux génerer un id avec du PHP sans problème).

    Voilà, ma question est donc : est-ce que vous connaissez une manière simple de trier un tableau ?
    • Partager sur Facebook
    • Partager sur Twitter
      28 avril 2009 à 12:57:49

      Pourquoi tu ne le tries pas lors de la génération ? o_O
      • Partager sur Facebook
      • Partager sur Twitter
        28 avril 2009 à 12:59:38

        Je le génére ligne par ligne (récupération de flux RSS) et l'affiche immédiatement en dans la page va AJAX.
        • Partager sur Facebook
        • Partager sur Twitter
          28 avril 2009 à 14:16:37

          Alors, je me suis penché un peu dessus. Voilà ce que je te propose :

          D'abord, ajoute un id="tableau" à ton table :
          <table id="tableau">
          



          Ensuite, tu mets ce JS :

          function fct_date(a,b) { // Fonction pour définir le tri
            var reg = /(\d{2})-(\d{2})-(\d{4})/; // On définit une regexp pour les dates
            var date1 = a.date.replace(reg,"$3$2$1"); // On remplace le format jj-mm-aaaa par aaaammjj
            var date2 = b.date.replace(reg,"$3$2$1");
            return date1-date2; // On renvoit la différence des deux
          }
          
          function tri_date(croissant) { // La fonction qui trie (en param un booléen indiquant croissant ou non)
            content = content.sort(fct_date); // On trie le tableau content, suivant la fonction fct_date
            if(!croissant){ // Si on veut l'ordre décroissant
              content = content.reverse(); // On inverse
            }
            reconstruire_tab(); // Et on appelle la fonction qui va afficher le tableau trié
          }
          
          function reconstruire_tab() { // Fonction qui affiche le tableau trié
            var str = ""; // On crée une chaîne vide
            for(var i=0,l=content.length;i<l;i++) { // Pour chaque objet de content
              str += "<tr><td class='date'>"+content[i].date+"</td>"; // On ajoute à la chaîne les informations tirées de content
          	str += "<td class='titreSite'>"+content[i].titresite+"</td>";
          	str += "<td class='titreArticle'>"+content[i].titrearticle+"</td></tr>";
            }
            tbody.innerHTML = str; // Et on remplace le contenu de tbody par cette chaîne
          }
          
          var tbody;
          var content = []; // On crée un tableau vide content
          window.onload=function() { // Au chargement (initialisation)
            var tab = document.getElementById("tableau"); // On récupère le table
            tbody = tab.getElementsByTagName("tbody")[0]; // le tbody (en variable globale)
            var tr = tbody.getElementsByTagName("tr"); // les tr
            for(var i=0,l=tr.length;i<l;i++) { // Pour chaque tr
              var td = tr[i].getElementsByTagName("td"); // On récupère les td
          	content[i]={}; // On crée un objet vide dans le tableau content
          	content[i].date = td[0].innerHTML; // Et on remplit avec les contenus des td
          	content[i].titresite = td[1].innerHTML;
          	content[i].titrearticle = td[2].innerHTML;
            }
          };
          



          Et tu pourras aisément trier le tableau par date à l'aide des appels :

          tri_date(true); // Trier par ordre croissant
          tri_date(false); // Trier par ordre décroissant
          
          • Partager sur Facebook
          • Partager sur Twitter
            28 avril 2009 à 15:13:36

            D'accord, merci.
            Je tenterais ça plus tard. ^^
            • Partager sur Facebook
            • Partager sur Twitter
              28 avril 2009 à 15:16:51

              Golmote.... t'es un fou :p je garde le code... :lol:
              • Partager sur Facebook
              • Partager sur Twitter
                28 avril 2009 à 15:50:28

                Ca c'est pas nouveau, birdy ^^

                Mais j'aime bien ce genre de petit challenge. Ca permet souvent d'apprendre des trucs, en plus. (Par exemple, dans le cas présent, le fonctionnement de la méthode sort() d'un Array ^^ )
                • Partager sur Facebook
                • Partager sur Twitter
                  28 avril 2009 à 15:59:22

                  J'avoue que j'ai pas trop compris.. mais bon si ça marche... hein :p
                  genre ça :
                  content = content.sort(fct_date);
                  //tu appelles la fonction fct_date()
                  //mais tu ne donnes rien en paramètres... et j'ai pas vu de a ou b qui sont paramètres ensuite 
                  function fct_date(a,b)
                  

                  ça veut dire quoi ? :p
                  • Partager sur Facebook
                  • Partager sur Twitter
                    28 avril 2009 à 19:33:24

                    Pouf, la bible !

                    C'est une fonction qui permet de définir comment deux objets a et b vont être trié. Pour définir lequel est plus grand que l'autre...
                    Et donc dans la fonction fct_date(), je dis qu'il faut comparer les valeurs des propriétés date des objets, au format aaaammjj.

                    Capich ?
                    • Partager sur Facebook
                    • Partager sur Twitter
                      29 avril 2009 à 7:32:46

                      Oui c'est plus clair dans mon esprit ( même si j'aurais jamais réussi à le faire moi- même :p )
                      Merci pour la bible :p (je préfère celle là que la version religieuse :D
                      • Partager sur Facebook
                      • Partager sur Twitter

                      Trier un tableau

                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                      • Editeur
                      • Markdown