Partage
  • Partager sur Facebook
  • Partager sur Twitter

Afficher un tableau

    14 mai 2021 à 23:19:36

    Bonjour,

    je voudrais afficher un catalogue dans un tableau qui aurait 4 colonnes :

    actuellement j'arrive à avoir une ligne, mais pas à lui faire créer une nouvelle ligne au bout de 4 colonnes.

    <!DOCTYPE html>
    <html lang="fr">
      <head>
        <meta charset="UTF-8" />
        <link
          rel="stylesheet"
          href="{{ url_for('static', filename='style.css') }}"
        />
        <title>Music</title>
      </head>
      <body>
        <div>
          <p>Voici un catalogue triée : par prix, puis nom d'album </p>  
          
            <table>
                <tr>
                    {% for catalogue in catalogues %}
                
                    <td>
                        <img src="../static/couverture/{{ catalogue.couverture }}" alt="{{ catalogue. name }}">
                        <p>Prix : {{catalogue.prix}}  &euro;</p> 
                        <p>Album : {{ catalogue.nom }}</p> 
                        <p>Artiste : {% for collectArtist in catalogue.collectionArtist %}{{collectArtist.name}}{% endfor %}</p>
                    </td>
                
                    {% endfor %}
                </tr>
            </table>
    
        </div>
      </body>
    </html>

    et j'ai ça :

    Je voudrais juste que arrivé au 4ème album, il me crée une autre ligne avec 4 albums ... etc

    J'ai pas trouvé de solution en Python, j'aurai voulu adapter une méthode que j'ai trouvé en php avec un modulo, mais je n'y arrive pas...

    Une idée ?



    • Partager sur Facebook
    • Partager sur Twitter
      14 mai 2021 à 23:50:18

      Pitchounvivi a écrit:

      J'ai pas trouvé de solution en Python, j'aurai voulu adapter une méthode que j'ai trouvé en php avec un modulo, mais je n'y arrive pas...

      Une idée ?



      Fais voir le code que tu essayes d'adapter

      • Partager sur Facebook
      • Partager sur Twitter
        15 mai 2021 à 3:17:26

        Je fais un guess tout de même
        for i in range(...):
         print(..., end=' ')
         if i%4==0 and i!=0: print()
        ou encore:
        for i in range(0, len(liste), 4):
         print(*liste[i:i+4])
        ou bien:
        print(*[liste[i:i+4] for i in range(0, len(liste), 4)], sep='\n')
        • Partager sur Facebook
        • Partager sur Twitter

        Le Tout est souvent plus grand que la somme de ses parties.

          15 mai 2021 à 10:42:18

          @Nethtys : déjà merci de ton aide.
          J'ai trouvé 2 solutions en php, qui ont l'aire pas mal :

          1): qui utiliserait un tableau

          <html><body>
          <?php
          // $NbreData : le nombre de données à afficher
          // $NbrCol : le nombre de colonnes
          // $NbrLigne : calcul automatique AVANT affichage
          // -------------------------------------------------------
          // (exemple)
          $NbrCol = 4;
          $tableau = array('elt0','elt1','elt2','elt3','elt4','elt5');
          // -------------------------------------------------------
          $NbreData = sizeof($tableau);
          // -------------------------------------------------------
          // calcul du nombre de lignes
          if (round($NbreData/$NbrCol)!=($NbreData/$NbrCol)) {
             $NbrLigne = round(($NbreData/$NbrCol)+0.5);
          } else {
             $NbrLigne = $NbreData/$NbrCol;
          }
          // -------------------------------------------------------
          // affichage
          if ($NbreData != 0) {
          $k = 0;
          echo '<table border="1">';
          for ($i=1; $i<=$NbrLigne; $i++) {
             echo '<tr>';
             for ($j=1; $j<=$NbrCol; $j++) {
                if ($k<$NbreData) {
                   echo '<td>';
                    // ------------------------------------------
                    // AFFICHAGE de l'element
                   echo $tableau[$k];
                    // ------------------------------------------
                   echo '</td>';
                   $k++;
                } else {    //  case vide
                   echo '<td> </td>';
                }
             }
             echo '<tr>';
             $j=1;
          }
          echo '</table>';
          } else {
          echo 'pas de données à afficher';
          }
          ?>
          </body></html> 

          la 2): celle du modulo

          <html><body>
          <?php
          // $NbreData : le nombre de données à afficher
          // $NbrCol : le nombre de colonnes
          // $NbrLigne : calcul automatique a la FIN
          // -------------------------------------------------------
          // (exemple)
          $NbrCol = 4;
          $tableau = array('elt0','elt1','elt2','elt3','elt4','elt5');
          // -------------------------------------------------------
          $NbreData = sizeof($tableau);
          // -------------------------------------------------------
          // affichage
          $NbrLigne = 0;
          if ($NbreData != 0) {
          $k = 0;
          $j = 1;
          echo '<table border="1">';
          while ($k < $NbreData) {
             if ($j%$NbrCol == 1) {
                $NbrLigne++;
                echo "<tr>";
                $fintr = 0;
             }
             echo '<td>';
              // ------------------------------------------
              // AFFICHAGE de l'element
             echo $tableau[$k];
              // ------------------------------------------
             echo '</td>';
             $k++;
             if ($j%$NbrCol == 0) {
                echo "</tr>"; 
                $fintr = 0;
             }
             $j++;
          }
          if ($fintr!=1) { echo '</tr>'; }
          echo '</table>';
          } else {
          echo 'pas de données à afficher';
          }
          ?>
          </body></html> 

          Mais je n'arrive à adapter ni l'une, ni l'autre.

          @PierrotLeFou :

          Si j'ai bien compris tes (3 solutions), il faut le gérer en "back" Python, mais comment je l'affiche sur ma page ?
          Je pensais que print sortait les résultats que dans le terminal ?

          Je pense que je m'y prend mal, mais je ne peux pas utiliser print() avec un render_template, on est d'accord ?

          Oui je suis très débutant, ... mais il faut bien commencer et je ne suis pas sur de tout comprendre.
          J'essaie de m'y remettre après 6 mois et je réalise que j'ai oublié plein de chose ... :'(

          -
          Edité par Pitchounvivi 15 mai 2021 à 12:26:55

          • Partager sur Facebook
          • Partager sur Twitter
            15 mai 2021 à 12:29:12

            Pitchounvivi a écrit:

            actuellement j'arrive à avoir une ligne, mais pas à lui faire créer une nouvelle ligne au bout de 4 colonnes.

            Oui sans doute que le tag <tr> serait mieux dans la boucle {% for ... %}

            • Partager sur Facebook
            • Partager sur Twitter

            Celui qui trouve sans chercher est celui qui a longtemps cherché sans trouver.(Bachelard)
            La connaissance s'acquiert par l'expérience, tout le reste n'est que de l'information.(Einstein)

              15 mai 2021 à 12:44:47

              Re, 

              j'avais mis le <tr>  dedans, mais ça n'allait pas non plus.

              Certainement un problème lié à la boucle ... Parce que j'avais tout à la verticale, au lieu de l'horizontale.

              Est-il possible de faire comme en php ?

              C'est à dire lui faire 1 boucle qui compte le nombre de colonne et quand il arrive à 4, il fait une nouvelle ligne ...

              Actuellement j'ai essayé d'adapter ça, mais je ne dois pas bien m'y prendre.

              C'est la première fois que j'essaie un truc de ce genre en Python, qui pour le coup est très différent du php.

              • Partager sur Facebook
              • Partager sur Twitter
                15 mai 2021 à 14:26:51

                Pitchounvivi a écrit:

                C'est la première fois que j'essaie un truc de ce genre en Python, qui pour le coup est très différent du php.


                Ce n'est pas du Python mais un langage de génération de template (peut être Jinja?) qui utilise des bouts de Python pour fabriquer des pages HTML dynamiquement. Déjà côté programmation, si on veut afficher 4 éléments par lignes sortis d'une liste, il va falloir un compteur à qui appliquer un modulo et en fonction du résultat sortir <TR> et </TR> pour créer/terminer une ligne.

                Pour les détails, il faudrait déjà savoir quel générateur de template est utilisé car les syntaxes se ressemblent mais si on veut coder pour voir...

                • Partager sur Facebook
                • Partager sur Twitter
                  15 mai 2021 à 16:39:34

                  Pitchounvivi a écrit:

                  j'avais mis le <tr>  dedans, mais ça n'allait pas non plus.

                  Certainement un problème lié à la boucle ... Parce que j'avais tout à la verticale, au lieu de l'horizontale.

                  Alors déjà je connais rien à PHP, mais HTML, en regardant un exemple comme ICI, on voit rapidement que <tr><td> sont dans la boucle...

                  Maintenant, PHP, HTML et JavaScript, c'est pas ma tasse de thé :-°

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Celui qui trouve sans chercher est celui qui a longtemps cherché sans trouver.(Bachelard)
                  La connaissance s'acquiert par l'expérience, tout le reste n'est que de l'information.(Einstein)

                    15 mai 2021 à 17:05:17

                    re, c'est jinja à priori

                    on m'a conseillé bootstrap, mais j'aimerai bien avoir un truc maison. C'est plus formateur.

                    • Partager sur Facebook
                    • Partager sur Twitter
                      15 mai 2021 à 17:32:46

                      Jinja, c'est à dire ?

                      Bootstrap ou pas, je ne vois pas ce qui va arranger ton problème...

                      • Partager sur Facebook
                      • Partager sur Twitter

                      Celui qui trouve sans chercher est celui qui a longtemps cherché sans trouver.(Bachelard)
                      La connaissance s'acquiert par l'expérience, tout le reste n'est que de l'information.(Einstein)

                        15 mai 2021 à 18:08:02

                        En utilisant les container de bootstrap on arrive à obtenir ça :

                        Mais c'est du css.

                        Moi j'aimerai savoir si je peux le faire "manuellement".

                        Le template d'affichage, c'est jinja.

                        • Partager sur Facebook
                        • Partager sur Twitter
                          15 mai 2021 à 19:07:56

                          Je connais Jinja, et je connais bootstrap, mais quel lien avec le problème de base, comme le dit @mps

                          Pour me rassurer j'ai regardé un de mes projets, et effectivement <tr></tr> se trouvent dans la boucle.

                          Par contre ton attribut alt ne peut pas fonctionner, il y a un espace en trop.

                          Et pour le reste @mps l'a dit, il faut un modulo...

                          EDIT:

                          Je m'explique peut-être sur ce que j'ai dis plus haut, c'était peut-être pas clair,

                          Imaginons une liste de 12 éléments,

                          ['image_1', 'image_2', 'image_3', 'image_4', 'image_5', 'image_6', 'image_7', 'image_8', 'image_9', 'image_10', 'image_11', 'image_12']

                          on souhaite regrouper l'ensemble de cette liste par lignes de 4 colonnes, 

                          image_1 image_2 image_3 image_4
                          image_5 image_6 image_7 image_8
                          image_9 image_10 image_11 image_12

                          On va utiliser le modulo,

                          my_images = [f"image_{i}" for i in range(1, 13)]
                          
                          new_line = []
                          for ind, image in enumerate(my_images, start=1):
                              new_line.append(image)
                              if ind % 4 == 0:
                                  print(" ".join(new_line))
                                  new_line = []
                          

                          C'est le même principe pour ce cas.

                          -
                          Edité par fred1599 16 mai 2021 à 11:37:12

                          • Partager sur Facebook
                          • Partager sur Twitter

                          Celui qui trouve sans chercher est celui qui a longtemps cherché sans trouver.(Bachelard)
                          La connaissance s'acquiert par l'expérience, tout le reste n'est que de l'information.(Einstein)

                          Afficher 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