Bonjour,
Dans ma page j'ai un tableau de 40 colonnes (ou plus) que je voudrais 'découper', c-a-d ajouter deux lien "<Precedent" et "Suivant>" qui permettent de simuler une pagination sur le tableau.
Merci
Bonjour,
Dans ma page j'ai un tableau de 40 colonnes (ou plus) que je voudrais 'découper', c-a-d ajouter deux lien "<Precedent" et "Suivant>" qui permettent de simuler une pagination sur le tableau.
Merci
'...parfois l'informatique peut vous rendre fou...'
ta page est generée dynamiquement ? si oui tu devrais voir le forum de ton langage serveur (PHP?) pour ça...
oui ma page est dynamique, mais je ne veux pas faire de la pagination en php car ma page est très complexe, oublions que c'est du PHP, on suppose que j'ai un long tableau que je voudrer découper en JS
'...parfois l'informatique peut vous rendre fou...'
tu veux faire defiler les colonnes ?
pourquoi ne pas mettre ta table dans un div avec un overflow auto et un width défini ?
ca te mettra du scroll horizontal
Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.
Cours | FAQ | Sources Javascript
Cours | FAQ | Sources PHP
Mes Articles
bon le code peut etre optimisé, j'ai fais ca vite fais
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69 <script type='text/javascript'> var nbCols = 10; var startPos = 0; var maxCols = 0; function decoupeTable(idtable){ var tble = document.getElementById(idtable); var nav = document.createElement("div"); var tb = tble.getElementsByTagName("tbody")[0]; var lig = tble.getElementsByTagName("tr"); var next = document.createElement("input"); var prev = document.createElement("input"); next.type = "button"; next.value = ">"; next.onclick = function(){ if(startPos+nbCols != maxCols){ for(var i=0;i<lig.length;i++){ lig[i].childNodes[startPos].style.display = "none"; lig[i].childNodes[startPos+nbCols].style.display = ""; } startPos++; } } prev.type = "button"; prev.value = "<"; prev.onclick = function(){ if(startPos != 0){ startPos--; for(var i=0;i<lig.length;i++){ lig[i].childNodes[startPos].style.display = ""; lig[i].childNodes[startPos+nbCols].style.display = "none"; } } } nav.appendChild(prev); nav.appendChild(next); tble.parentNode.insertBefore(nav,tble); maxCols = lig[0].childNodes.length; for(var i=0;i<lig.length;i++){ var cells = lig[i].childNodes; for(var j=nbCols;j<maxCols;j++){ cells[j].style.display = "none"; } } } window.onload = function(){ decoupeTable('matable'); } </script> <div id='stpos'></div> <? echo "<table id='matable' border='1'> <tbody>"; for($i=0;$i<5;$i++){ echo "<tr>"; for($j=0;$j<50;$j++) echo "<td>",$i," ",$j,"</td>"; echo "</tr>"; } echo "</tbody> </table>"; ?>
Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.
Cours | FAQ | Sources Javascript
Cours | FAQ | Sources PHP
Mes Articles
merci very much c'est exactement ce que je cherche
'...parfois l'informatique peut vous rendre fou...'
siddh > est-il possible de ne PAS faire scroller la première colonne ? c-a-d quand je clique sur > la colonne 1 reste affichée mais les autres son décalée ?
Merci
'...parfois l'informatique peut vous rendre fou...'
bien sur,
il suffit de mettre :
et
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 var startPos = 1;
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 prev.onclick = function(){ if(startPos != 1){
Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.
Cours | FAQ | Sources Javascript
Cours | FAQ | Sources PHP
Mes Articles
si t'as le temps, j'avais fait ça pour simuler l'affichage page par page, sans php: http://javatwist.imingo.net/pppjs.php
les fonctions js sont dans le fichier http://javatwist.imingo.net/pppjs.js
teste toujours voir si le principe t'intéresse (mais j'ai pas mis à jour depuis longtemps)
oui la je fais ma table en php car j'avais la flemme
Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.
Cours | FAQ | Sources Javascript
Cours | FAQ | Sources PHP
Mes Articles
comment on fait pour le décalage se fasse en N colonne et non pas UNE colonne ? c-a-d que je voudrais faire comme dans l'exemple de javatwister, quand je clique sur Next j'affiche les N prochaines nolonnes (et non pas seulement la colonne prochaine)
J'ai fais ceci :
mais il y a pb d'affichage quand le nbr total des colonne n'est un un multiple de bloc
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 var bloc = 10; .... .... next.onclick = function(){ if(startPos+nbCols != maxCols){ for(var k=0;k<bloc;k++){ for(var i=0;i<lig.length;i++){ lig[i].childNodes[startPos].style.display = "none"; lig[i].childNodes[startPos+nbCols].style.display = ""; } startPos++; } } }
Exp :
12 colonnes
bloc = 10
Quand je clique sur > j'ai ceci :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 0 4 0 5 0 6 0 7 0 8 0 9 0 10 0 11 0 12 1 3 1 4 1 5 1 6 1 7 1 8 1 9 1 10 1 11 1 12 2 3 2 4 2 5 2 6 2 7 2 8 2 9 2 10 2 11 2 12 3 3 3 4 3 5 3 6 3 7 3 8 3 9 3 10 3 11 3 12 4 3 4 4 4 5 4 6 4 7 4 8 4 9 4 10 4 11 4 12
'...parfois l'informatique peut vous rendre fou...'
c'est bon j'ai trouvé
il suffisait de mettre la condition DANS la boucle pant avant
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 next.onclick = function(){ for(var k=0;k<bloc;k++){ if(startPos+nbCols != maxCols){ for(var i=0;i<lig.length;i++){ lig[i].childNodes[startPos].style.display = "none"; lig[i].childNodes[startPos+nbCols].style.display = ""; } startPos++; } } }
'...parfois l'informatique peut vous rendre fou...'
siddh > j'ai un autre pb maintenant en fixant la première colonne, il y a une colonne qui ne s'affiche plus !
Exp :
Max Colonnes : 8
Colonnes affichées : 5
Bloc : 5
click sur >
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 0 1 0 2 0 3 0 4 0 5 1 1 1 2 1 3 1 4 1 5 2 1 2 2 2 3 2 4 2 5 3 1 3 2 3 3 3 4 3 5 4 1 4 2 4 3 4 4 4 5
La colone 6 ne s'affiche plus !!!
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 0 1 0 4 0 5 0 7 0 8 1 1 1 4 1 5 1 7 1 8 2 1 2 4 2 5 2 7 2 8 3 1 3 4 3 5 3 7 3 8 4 1 4 4 4 5 4 7 4 8
'...parfois l'informatique peut vous rendre fou...'
ne te casse pas la tê ce que tu cherche existe déjà et optimisé multi navigateur
http://openrico.org/rico/livegrid.page
rico est un développement open source de composant "riche" en javascript
http://openrico.org/rico/home.page
A+JYT
tout est ok sauf que maintenant je voudrais placer les bouton ailleur qu'au dessus du tableau, j'ai essayé de faire un lien 'raccourçi' mais ça ne marche pas !! j'ai pourtant donné des noms aux 2 boutons !!
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 ... next.name = "bNext"; ... <a href="#" onClick="bNext.click()"> Suivant </a>
'...parfois l'informatique peut vous rendre fou...'
apres en style :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 tble.parentNode.insertBefore(nav,tble); nav.id = "unid";
enfin apres t'en fais ce que tu veux.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 #unid{ position: absolute; top: 100px; left: 100px; }
pour les boutons :
en style :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 prev.className = 'uneclasse'; next.className = 'unclasse';
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 .uneclasse{ }
Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.
Cours | FAQ | Sources Javascript
Cours | FAQ | Sources PHP
Mes Articles
avec cette méthode, les boutons sont placés dans une position bien données, or le contenu de ma page peut varier et donc les positions peuvent êtres mauvaise comment faire pour que la position verticale soit en fonction de la hauteur du tableau ?
PS : pourquoi après avoir défini un nom pour les bouton et en créeant un lein comme celui ci :
ça ne marche pas ???!!!
Code : Sélectionner tout - Visualiser dans une fenêtre à part <a href="#" onClick="bNext.click()"> Suivant </a>
ça ne marche que si j'utilise ceci :
même ceci ne fonctionne pas :
Code : Sélectionner tout - Visualiser dans une fenêtre à part <a href="#" onClick="document.forms[0].elements[0].click()"> Suivant </a>
Code : Sélectionner tout - Visualiser dans une fenêtre à part <a href="#" onClick="document.forms[0].elements["bNext"].click()"> Suivant </a>
'...parfois l'informatique peut vous rendre fou...'
pas trop compris ton histoire de vertical
met un id plutot aux boutons et ensuite tu feras :
Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById('bnext').click()
Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.
Cours | FAQ | Sources Javascript
Cours | FAQ | Sources PHP
Mes Articles
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager