[AJAX] Pagination avec Ajax
Bonjour !
Je souhaiterai faire de la pagination et j'utilise les technologies suivantes PHP/Ajax/MySQL.
J'ai essayé de chercher un peu partout sur le net et je suis tombé sur ça :http://www.dator.fr/langages/php/une...ation-en-ajax/ mais à vrai dire, je n'y comprend pas grand chose :P
J'ai une page php (Accueil.php par exemple) sur laquelle j'ai un image submit et plusieurs select.
accueil.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <label class="labelRecherche"><span>Choix :</span></label>
<select id="choix" class="selectRecherche" onchange="envoiDonneesInfo();">
<option value="Vente">Vente</option>
<option value="Recherche">Recherche</option>
</select>
</p>
<p class="rightTxt1">
<label class="labelRecherche"><span>Type</span> de bien :</label>
<select id="type" class="selectRecherche" onchange="affPrecision(this);">
<option value="PCDeBureau">PC de Bureau</option>
<option value="Portable">Portable</option>
<option value="Composants">Composants</option>
<option value="Moniteurs">Moniteurs</option>
<option value="Périphériques">Périphériques</option>
<option value="Logiciel">Logiciel</option>
</select>
</p>
<input type="hidden" id="annonce" value="informatique"/>
<input type="image" src="../images/go.jpg" onClick="envoiDonneesInfo()"><br /><br /><br />
<div id="reponse" align="center"></div> |
Lorsque je clique sur ce bouton, une fonction javascript est appelée. Cette fonction récupère les données dans les formulaires et envoi les données pour une page php par la méthode GET.
scripts.js
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
| function envoiDonneesInfo(){
var monObjetXhr = null; // INITIALISATION
var lien = "";
if(window.XMLHttpRequest){ // POUR FIREFOX
monObjetXhr = new XMLHttpRequest();
}
else if(window.ActiveXObject){ // POUR INTERNET EXPLORER
monObjetXhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else { // SI LE NAVIGUATEUR NE SUPPORTE PAS AJAX
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
// LES VALEURS DES CHAMPS SELECTS
annonce = document.getElementById("annonce").value;
choix = document.getElementById("choix").options[document.getElementById("choix").selectedIndex].value;
type = document.getElementById("type").options[document.getElementById("type").selectedIndex].value;
lien = "afficher.php?annonce="+annonce+"&choix="+choix+"&type="+type;
monObjetXhr.open("GET", lien); // ENVOI VERS LA PAGE afficher.php en GET et en mode assynchrone
monObjetXhr.onreadystatechange = function() {
if(monObjetXhr.readyState == 4) { // SI LA REPONSE EST CORRECTE
var xmlDocument = monObjetXhr.responseXML;
var annonce= xmlDocument.getElementsByTagName('annonce');
var annonce_choix= xmlDocument.getElementsByTagName('annonce_choix');
var annonce_type= xmlDocument.getElementsByTagName('annonce_type');
if(annonce.length > 1)
{
nbreAnnonces = '<span>'+annonce.length+'</span> annonces trouvées :';
} else if (annonce.length == 0){
nbreAnnonces = '<span>Aucune</span> annonce trouvée !';
} else {
nbreAnnonces = '<span>'+annonce.length+'</span> annonce trouvée :';
}
document.getElementById("reponse").innerHTML = "<p class='rightTxt1'> "+nbreAnnonces+" </p><table id='immoTab' cellpadding=5 cellspacing=5></table>";
function insRow(c1, c2){
var x=document.getElementById('immoTab').insertRow(0);
var y=document.getElementById('immoTab').insertRow(1);
var a=x.insertCell(0);
var b=x.insertCell(1);
a.innerHTML=c1;
b.innerHTML=c2;
}
}
for (i=0;i<annonce.length;i++){
insRow(
annonce_choix[i].childNodes[0].nodeValue, //1 Choix
annonce_type[i].childNodes[0].nodeValue, //2 type
}
}
monObjetXhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
monObjetXhr.send(null);
} |
La page php récupère les données et construit la requête MySQL a exécutée et une fois terminé affiche le résultat sous forme xml à l'aide d'echo.. (sur la même page).
afficher.php
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
| <?php
header("Content-Type: text/xml; charset=ISO-8859-1");
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! CONNEXION A LA BASE DE DONNES
mysql_connect('localhost','******','******');
mysql_select_db("annonces");
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! INITIALISATION DES REQUETES
if(isset($_GET['annonce'])){ $annonce = $_GET['annonce']; }
if(isset($_GET['choix'])) { $choix = $_GET['choix']; }
if(isset($_GET['type'])) { $type = $_GET['type']; }
$query = "SELECT * FROM ".$annonce." WHERE choix = '".$choix."' AND type = '".$type."'";
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! RENVOI XML
$requete = mysql_query($query );
$total_ligne = mysql_num_rows($requete);
$ligneParPage=3;
$total_page = ceil($total_ligne / $ligneParPage);
echo '<?xml version="1.0" encoding="iso-8859-1" ?>';
echo "<immobilier>";
echo "<annonces>";
while($affichage = mysql_fetch_array($query)){
echo '<annonce id ="'.$affichage['id_info'].'">';
echo "<annonce_choix>".$affichage['choix']."</annonce_choix>";
echo "<annonce_type>".$affichage['type']."</annonce_type>";
echo '</annonce>';
}
echo "</annonces>";
echo "</immobilier>";
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DECONNECTION
mysql_close();
?> |
La fonction javascript qui a attendu que l'XML soit bien écrit, parse la page php (transformé en xml pour l'occasion) et affiche le résultat sous forme de tableau grâce à innerHTML dans la div réponse placée de la page d'accueil.
Je pense qu'il faut d'une part agir sur la page afficher.php, voir le nombre de résultat qu'il retourne, c'est pourquoi j'ai mis $total_ligne etc... Mais après je ne sais plus quoi faire :s
Merci beaucoup de m'aider car je sèche complètement :s
