Pagination d'un tableau formulaire dynamique

**Argol** · 17/03/2009, 10h37

Bonjour à tous je posséde un tableau dynamique auquel je peux ajouter des lignes .
Ce meme tableau affiche au lancement de la page les champs deja present la BDD par une requete sur une page XML.

Le probleme est que je voudrais faire des pages ("page suivante"/ page precedente") pour limitter le scroll de ce fameu tableau.

Voila la methode qui permet d'afficher les champs de la base :

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
function AddRow2()
{
 
 
var xhr=createXHR();
	document.getElementById('table').style.visibility='visible';
	var rst;
 
	xhr.open("POST", "XMLenreg.php",true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 
	xhr.onreadystatechange = function()
	{
 
 
		if(xhr.readyState == 4)
		{
 
 
			if(xhr.status == 200)
			{
 
				rst=xhr.responseXML;
				nbligne=rst.getElementsByTagName('element').length-1;
 
 
 
 
 
 
 
 
 
			for(i=0; i<=nbligne; i++) // nbligne+1est le nombre de ref retourné
				{
 
	compteur++;
 
	var input0=document.createElement('input');
	input0.type = 'button';
	input0.name ="supprimer";
	input0.value="Supprimer";
	input0.onclick=function()
	{
	suppression(this.parentNode.parentNode.id);
	}
 
 
 
 
 
 
	var input1=document.createElement('input');
	input1.type = 'text';
	input1.name ="codeAAMM_"+i;
	input1.style.width="80px";
	//mise en forme de l'année
	valueTotal=rst.getElementsByTagName('codeAAMM')[i].childNodes[0].nodeValue; //on recupere la valeur total de l'enregitrement afin de recuperer l'année
	valueAN=valueTotal.substr(0,1);
 
	if (valueAN<10)
	{
	input1.value=0+rst.getElementsByTagName('codeAAMM')[i].childNodes[0].nodeValue; //si le mois ets inferieur à 10 alors on rajoute un 0 devant pour ma mise en forme
	}
	else
	{
	input1.value=rst.getElementsByTagName('codeAAMM')[i].childNodes[0].nodeValue; //sinon on se contente d'afficher le resultat
	}
 
 
	var input2=document.createElement('input');
	input2.type = 'text';
	input2.name ="date_"+i;	
	input2.style.width="120px";
	input2.value=rst.getElementsByTagName('date')[i].childNodes[0].nodeValue;
 
 
	var input3=document.createElement('input');
	input3.type = 'text';
	input3.name ="origine_"+i;	
	input3.id="origine_"+i;
	input3.ref = i;
	input3.style.width="80px";
	input3.value=rst.getElementsByTagName('origine')[i].childNodes[0].nodeValue;
	input3.onkeyup = function(){
    check(this.ref);
	total();
	}
	input3.onchange=function(){	
	total();
	}
 
 
	var input4=document.createElement('input');
	input4.type = 'text';
	input4.name ="personne_"+i;
	input4.id="personne_"+i;
	input4.ref = i;
	input4.style.width="115px";
	input4.value=rst.getElementsByTagName('personne')[i].childNodes[0].nodeValue;
 
 
 
	var input5=document.createElement('input');
	input5.type = 'text';
	input5.name ="lieu_"+i;
	input5.id="lieu_"+i;
	input5.ref = i;
	input5.style.width="110px";
	input5.value=rst.getElementsByTagName('lieu')[i].childNodes[0].nodeValue;
 
 
 
 
 
	var input7=document.createElement('input');
	input7.type = 'text';
	input7.name ="Visa_"+i;
	input7.id="Visa_"+i;
	input7.ref = i;
	input7.style.width="70px";
	input7.value=rst.getElementsByTagName('Visa')[i].childNodes[0].nodeValue;
 
 
	var input6=document.createElement('input');
	input6.type = 'text';
	input6.name ="Numero_"+i;
	input6.id="Numero_"+i;
	input6.ref = i;
	input6.style.width="170px";
	input6.value=rst.getElementsByTagName('Numero')[i].childNodes[0].nodeValue;
 
 
 
//on crée un nouvelle ligne puis les nouvelles cellules a l'interieur
       var newRow = document.getElementById('table').insertRow(1);
	newRow.id="ligne"+compteur;
    var newCell = newRow.insertCell(0);
 newCell.appendChild(input0);
	 newCell = newRow.insertCell(0);
	newCell.appendChild(input1);
    newCell = newRow.insertCell(1);
    newCell.appendChild(input2);
	 newCell = newRow.insertCell(2);
   newCell.appendChild(input3);
	 newCell = newRow.insertCell(3);
     newCell.appendChild(input4);
	 newCell = newRow.insertCell(4);
   newCell.appendChild(input5);
	 newCell = newRow.insertCell(5);
	  newCell.appendChild(input6);
	 newCell = newRow.insertCell(6);
	 newCell.appendChild(input7);
	 newCell = newRow.insertCell(7);
 
 
 
 
 
				}
	  codeEff=rst.getElementsByTagName('codeAAMM')[nbligne].childNodes[0].nodeValue;
 
      //ici on va comparer la derniere ligne presente dans la base pour pouvoir recuperer la derniere valeur du compteur SI la date acutelle est egal a la date de la derniere ligne : sinon compteur sera reinitialisé à 0
	  var an = codeEff.substr(0, 1); // sous_chaine  pour le l'année	
	  if (an<10) //si l'année est inferieur a 10 on rajoute un 0 devant "9" devient "09"
	  {an='0'+an;}
 
      var mois = codeEff.substr(1, 2); // sous_chaine  pour le mois
 
 
 
 maDate=new Date(); //date actuelle
 
 moisReel=maDate.getMonth()+1; //on recupere le mois actuel
 anneeReel=maDate.getYear()-100;  //on recupere l'année actuelle
 
 if (moisReel<10)
 {
moisReel=0+""+moisReel;
 }
 
 if (anneeReel<10)
 {
 anneeReel=0+""+anneeReel;
 }
 
 
//on compare maintenant si le mois et l'anne actuel sont egal au mois et l'année de la derniere ligne enregistré	
 
if 	(mois==moisReel && an==anneeReel)
{
 
c=codeEff.substr(3,3); //on recupere le numero du compteur actuel
 
 
compteur=c; //si le date acutelle correpond bien a la date de la derniere ligne alors on inititalise le compteur au dernier increment 
 
 
}
else  {compteur=0;}  //sinon on remet le compteur à 0
 
 
 
 
			}
			else	
			{
				alert("Error: returned status code " + xhr.status + " " + xhr.statusText);
			}	
		} 
 
 
	};
 
 
xhr.send("");
 
}

et voila le XML

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
<?php
//connection à la base de donnée.
$connect = mysql_connect("localhost","root","") or die("erreur de connexion au serveur $host");
mysql_select_db("Colis", $connect);
 
 
 
 
 
$y=$_POST['limite'];
$x=$_POST['nombre'];
 
$selectp = "SELECT CodeColis,Date,Origine,Personne,Lieu,Numero,Visa FROM colis LIMIT '.$x.','.$y.'"; //requete SQL pour obtenir les champs 
$resultp = mysql_query($selectp,$connect) or die ('Erreur : '.mysql_error() );
 
header("Content-type:text/xml"); //XML 
echo'<?xml version="1.0" encoding="ISO-8859-1"?><elements>';
 
 
 
 
while($rowp = mysql_fetch_array($resultp)) 
{echo '<element>';
echo '<codeAAMM>'.$rowp['CodeColis'].'</codeAAMM>';
 
echo '<date>'.$rowp['Date'].'</date>';
 
echo '<origine>'.$rowp['Origine'].'</origine>';
 
echo '<personne>'.$rowp['Personne'].'</personne>';
 
echo '<lieu>'.$rowp['Lieu'].'</lieu>';
 
echo '<Numero>'.$rowp['Numero'].'</Numero>';
 
echo '<Visa>'.$rowp['Visa'].'</Visa>';
 
echo'</element>';}
 
 
echo'</elements>';
 
 
?>

donc dans le XML j'ai proceder comme je le ferait en PHP un limit dans la requete :
$y=$_POST['limite'];
$x=$_POST['nombre'];

pour pouvoir donner les champs que je veux :

seulement pour recuper les $x et $y par $ POST il faut je j'envoye des XHR.send()

eLa question est donc comment puis je faire pour faire des liens "page suivante"/"page precdente" en envoyant des valeurs à $x et $y ?

Merci!

**SpaceFrog** · 17/03/2009, 10h53

ça se passe coté serveur en php mysql par exemple avec LIMIT ..

**Argol** · 17/03/2009, 10h54

bien sur j'ai deja fait sa ! lol c'est pas la partie qui me derange si tu lis le post

**SpaceFrog** · 17/03/2009, 10h55

alors je ne vois pas ce qui te derange, le tout est de bien construire les lien declencheurs ...

**Argol** · 17/03/2009, 10h58

ben c'est justement c'est fameux lien que je ne vois pas du tout comment construire et ou placer

puisque il faut j'envoie 2 variables a la feuille XML $x,$y correpondant a la limitte de la requete VIA xhr.send
qui seront recuperer par le XML pour le LIMIT