1 pièce(s) jointe(s)
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:
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 :
Pièce jointe 600467
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:
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.
