IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Faire défiler le contenu d'un tableau sur plusieurs pages


Sujet :

JavaScript

  1. #1
    Membre actif
    Inscrit en
    Janvier 2003
    Messages
    604
    Détails du profil
    Informations forums :
    Inscription : Janvier 2003
    Messages : 604
    Points : 247
    Points
    247
    Par défaut Faire défiler le contenu d'un tableau sur plusieurs pages
    Bonjour,
    Je fais une interface d'édition de données où je souhaite afficher un tableau sur plusieurs pages pour éviter de scroller.
    J'ai généré mon tableau en php avec le code suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <tbody>
                                <thead>
                                  <tr>
                                    <th>Supprimer</th>
                                    <th>Sexe</th>
                                    <th>Nom</th>
                                    <th>Prenom</th>
                                    <th>Code Postal</th>
                                    <th>Mail</th>
                                    <th>Téléphone Client</th>
                                  </tr>
                            </thead>
     
    <?php if (count($AffichageClients) > 0)
    echo (count($AffichageClients));
                                          for ($i=0;$i<count($AffichageClients);$i=$i+7)
                                            {
                                              echo  '<tr>';
                                              echo '<td><input  type="checkbox" name="checkbox"> </td>';
                                              echo  '<td class="d-none"  name="id">  ' . $AffichageClients[$i] . ' </td>';
                                              echo  '<td contenteditable="true" id="SEXE" type="text" name="SEXE">  ' . $AffichageClients[$i+1] . ' </td>';
                                              echo  '<td contenteditable="true" id="NOM"" type="text" name="NOM">  ' . $AffichageClients[$i+2] . ' </td>';
                                              echo  '<td contenteditable="true" id="PRENOM" type="text" name="PRENOM">  ' . $AffichageClients[$i+3] . ' </td>';
                                              echo  '<td contenteditable="true" id="CODE_POSTAL" type="text" name="CODE_POSTAL">  ' . $AffichageClients[$i+4] . ' </td>';
                                              echo  '<td contenteditable="true" id="MAIL" type="text" name="MAIL">  ' . $AffichageClients[$i+5] . ' </td>';
                                              echo  '<td contenteditable="true" id="TELEPHONE" type="text" name="TELEPHONE">  ' . $AffichageClients[$i+6] . ' </td>';
                                              echo  '</tr>';
                                              }
    ?>
                              </tbody>
    Ce qui donne cela :

    Nom : Ecran.png
Affichages : 158
Taille : 99,1 Ko

    Ensuite j'ai fait un code javascript qui devrait permettre l'affichage du tableau de manière séquentiel : lorsque l'on clique sur les deux boutons "Précédent" << et "Suite" >> identifiés par leur id, on devrait pouvoir passer de page en page. Je conserve la position d'affichage du tableau dans deux bloques non visibles et je la mets à jour à chaque modification.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    let val=$("#Fin").text();
      const  Prec=document.getElementById("Précédent")
      const  Suiv=document.getElementById("Suite")
     
      var elem = document.getElementsByTagName('tr')
      /* Boucle pour parcourir chaque element trouvé */
      for(var i=elem.length; i>0; i--)
        {
          if (i>val)
            {
            elem[i-1].style.display = "none";
            }
        }
     
        Prec.addEventListener('click',AvancerListeAffichage);
     
        function AvancerListeAffichage(){
          var elem = document.getElementsByTagName('tr')
          /* Boucle pour parcourir chaque element trouvé */
        let Debut=$("#Debut").text();
        let Fin=$("#Fin").text();
        Debut=Debut-10;
        Fin=Fin-10;
        if (Debut<1) {Debut=1;}
        if (Fin<10) {Fin=10;}
        for(var i=elem.length; i=1; i--)
        {
          if (Debut<i && i<Fin)
            {
            elem[i].style.display = 'block';
            }
        /*    else
            {
            elem[i].style.display = 'none';
          }*/
         }
    $("#Fin").text(Debut);
       }
     
     Prec.addEventListener('click',AvancerListeAffichage);
    Mais je fais planter le navigateur Chrome sans possibilité de debugguer le code lorsque je clique sur le bouton Prec (<<), Auriez vous une idée du défaut de mon programme où de ce que je dois changer ? Merci de votre aide.

  2. #2
    Membre régulier Avatar de tag9724
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2021
    Messages
    64
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2021
    Messages : 64
    Points : 113
    Points
    113
    Par défaut
    Je n'ais pas testé le code mais de ce que j'en ais vu une de tes boucles for est plutôt dangereuse.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    for(var i=elem.length; i=1; i--)
    Cette seconde boucle dans ton code est une boucle infinie, à chaque itération la variable i sera remise à 1.
    En gros ici i=1 ne sera pas une condition mais un assignement de variable qui renverras toujours 1 donc vrais.

  3. #3
    Membre actif
    Inscrit en
    Janvier 2003
    Messages
    604
    Détails du profil
    Informations forums :
    Inscription : Janvier 2003
    Messages : 604
    Points : 247
    Points
    247
    Par défaut
    Oh, la boulette. Des fois on crois savoir des choses et puis on fait de la merde. Bref... j'ai fait un gros bug.
    Merci pour la perspicacité.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. faire défiler le contenu d'un tableau
    Par Mengué georges dans le forum Général JavaScript
    Réponses: 15
    Dernier message: 17/11/2009, 17h43
  2. Réponses: 2
    Dernier message: 17/02/2007, 12h34
  3. Réponses: 3
    Dernier message: 03/07/2006, 13h45
  4. [JSP]affichage d'un tableau sur plusieurs pages
    Par MAJIK_ENIS dans le forum Servlets/JSP
    Réponses: 3
    Dernier message: 29/08/2005, 11h21
  5. [CR8] Problème tableau sur plusieurs pages???
    Par christophe28 dans le forum SAP Crystal Reports
    Réponses: 5
    Dernier message: 02/11/2004, 15h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo