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 : 193 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.