Pagination [Sources]

**sami_c** · 04/01/2006, 08h38

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

Invité · 04/01/2006, 17h19

ta page est generée dynamiquement ? si oui tu devrais voir le forum de ton langage serveur (PHP?) pour ça...

**sami_c** · 05/01/2006, 14h58

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

**siddh** · 05/01/2006, 15h07

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

**siddh** · 05/01/2006, 16h02

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

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

**sami_c** · 05/01/2006, 16h38

merci very much

c'est exactement ce que je cherche

**sami_c** · 06/01/2006, 11h54

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

**siddh** · 06/01/2006, 11h59

bien sur,
il suffit de mettre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var startPos = 1;

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**javatwister** · 06/01/2006, 12h28

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)

**siddh** · 06/01/2006, 12h30

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

**sami_c** · 06/01/2006, 15h46

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 :

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

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 :

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

**sami_c** · 06/01/2006, 16h38

c'est bon j'ai trouvé

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

il suffisait de mettre la condition DANS la boucle pant avant

**sami_c** · 06/01/2006, 16h52

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 :

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

click sur >

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

La colone 6 ne s'affiche plus !!!

**sekaijin** · 06/01/2006, 17h08

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

**sami_c** · 07/01/2006, 10h17

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>

**siddh** · 07/01/2006, 10h23

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
tble.parentNode.insertBefore(nav,tble); 
nav.id = "unid";

apres en style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
prev.className = 'uneclasse';
next.className = 'unclasse';

en style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.uneclasse{
 
}

**sami_c** · 07/01/2006, 11h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

même ceci ne fonctionne pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**siddh** · 07/01/2006, 12h04

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

Pagination [Sources]

JavaScript

Vue hybride

Discussions similaires

Partager

Partager