Pagination d'un tableau formulaire dynamique
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:
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:
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!
