Pagination

Version imprimable

04/01/2006, 08h38
sami_c

Pagination

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 :)
04/01/2006, 17h19
Invité

:salut:

ta page est generée dynamiquement ? si oui tu devrais voir le forum de ton langage serveur (PHP?) pour ça...
05/01/2006, 14h58
sami_c

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
05/01/2006, 15h07
siddh

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

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
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>";
?>

bon le code peut etre optimisé, j'ai fais ca vite fais ;)

05/01/2006, 16h38
sami_c

merci very much :) c'est exactement ce que je cherche :)
06/01/2006, 11h54
sami_c

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 :)

bien sur,
il suffit de mettre :

Code:

1
2
 
var startPos = 1;

Code:

1
2
prev.onclick = function(){
         if(startPos != 1){

06/01/2006, 12h28
javatwister

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)
06/01/2006, 12h30
siddh

oui la je fais ma table en php car j'avais la flemme ;)

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 :

Code:

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++; 
			}
         } 
      }

mais il y a pb d'affichage quand le nbr total des colonne n'est un un multiple de bloc :(
Exp :
12 colonnes
bloc = 10
Quand je clique sur > j'ai ceci :

Code:

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

c'est bon j'ai trouvé :)

Code:

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++; 
         } 
         } 
      }

il suffisait de mettre la condition DANS la boucle pant avant

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

Code:

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

click sur >

Code:

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

La colone 6 ne s'affiche plus !!!

06/01/2006, 17h08
sekaijin

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
07/01/2006, 10h17
sami_c
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:

1 2 3 4 5 ... next.name = "bNext"; ... <a href="#" onClick="bNext.click()"> Suivant </a>

Code:

1 2 tble.parentNode.insertBefore(nav,tble); nav.id = "unid";
apres en style :
Code:

1 2 3 4 5 #unid{ position: absolute; top: 100px; left: 100px; }
enfin apres t'en fais ce que tu veux.

pour les boutons :
Code:

1 2 prev.className = 'uneclasse'; next.className = 'unclasse';
en style :
Code:

1 2 3 .uneclasse{ }
;)

07/01/2006, 11h11
sami_c

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 :

Code:

<a href="#" onClick="bNext.click()"> Suivant </a>

ça ne marche pas ???!!!
ça ne marche que si j'utilise ceci :

Code:

<a href="#" onClick="document.forms[0].elements[0].click()"> Suivant </a>

même ceci ne fonctionne pas :

Code:

<a href="#" onClick="document.forms[0].elements["bNext"].click()"> Suivant </a>
07/01/2006, 12h04
siddh

pas trop compris ton histoire de vertical :D

met un id plutot aux boutons et ensuite tu feras :

Code:

document.getElementById('bnext').click()