Nous allons voir ici comment mette en place facilement un chargement de tableau dynamique en AJAX et JSON, et tout cela avec jQuery.
Pourquoi JSON et AJAX ? AJAX à l’avantage de pouvoir charger des données de manière transparente, en arrière plan. JSON, quant à lui, possède la propriété d’être léger en poids et de consommer très peu de bande passante, donc d’être plus rapide. Nous renvoyons ici simplement les données à afficher dans notre tableau. Ensuite, c’est JavaScript qui va s’occuper d’afficher les données au bon endroit. L’avantage aussi, avec JSON et JavaScript, c’est que le serveur travail moins, c’est le navigateur du client qui construit l’HTML.
Voir le résultat : json
Premièrement, nous allons définir les différents fichiers nécessaires :
- un fichier html affiché dans le navigateur (exemple.html)
- un fichier JavaScript (script.js)
- le fichier appelé via AJAX (ajax.php)
- et bien sûr, la librairie jQuery qui va nous permettre de simplifier notre code
Vous trouverez en bas de page le zip des fichiers.
On va commencer par le code du fichier html :
Ensuite, nous allons voir le code php du fichier AJAX :
$array = array(); // initialisation du tableau
$maxLigne = 100; // le nombre max de ligne en retour
$start = isset($_REQUEST['start'])?(int)$_REQUEST['start']:1; // on récupère la variable de début (on notera le (int) permettant de forcer le typage)
$pas = 10; // le pas
$compteur = 1; // notre compteur de référence
for($i=1;$i<=$maxLigne;$i++){ // on boucle de 1 à nombre de ligne total (ce pourrait être le résultat d'une requête MySQL)
if($compteur >= $start && $compteur<($start+$pas) ){ // si nous sommes dans la tranche à afficher (de start à start+pas)
for($j=1;$j<=3;$j++){ // ici, on boucle sur 3 colonnes .... ce pourrait être du fixe avec autant de colonne que besoin
$array[$i]['colonne_'.$j] = $i.'-'.$j; // on insère dans le tableau la donnée
} // fin boucle des colonnes
} // fin di dans la tranche
$compteur++; // on incrémente le compte de référence
} // fin boucle des lignes
$aListeFinal = array(); // on initialise le tableau final
$aListeFinal['total'] = $maxLigne; // on y met le nombre total de ligne (dans le cas d'une requête SQL, ce serait un mysql_num_row)
$aListeFinal['start'] = $start; // la valeur de start
$aListeFinal['pas'] = $pas; // la valeur du pas
$aListeFinal['data'] = $array; // le tableau de donnée
echo json_encode( $aListeFinal ); // puis on affiche l'encodage JSON
Nous allons maintenant voir le JavaScript :
function chargerTableau( start ){ // fonction qui va s'occuper de gérer le chargement et l'affichage des données
var monUrl = 'ajax.php?start='+start; // on crée l'url du fichier PHP
$.ajax({
url:monUrl, // définition de l'url
dataType: 'json', // définition du format
success:function(myArray){ // on charge une méthode anonyme pour gérer le succès de l'appel à l'url
var html = ''; // on initialise la variable contenant l'html
if( myArray.data!=null ){ // si le tableau de données n'est pas null
for(ligne in myArray.data){ // on va boucler sur chaque ligne à afficher
html += '<tr>';
html += '<td>'+ myArray.data[ligne]['colonne_1'] +'</td>'; // colonne 1
html += '<td>'+ myArray.data[ligne]['colonne_2'] +'</td>'; // colonne 2
html += '<td>'+ myArray.data[ligne]['colonne_3'] +'</td>'; // colonne 3
html += '</tr>';
}
}
$('#conteneur').html( html ); // on remplace l'html du tbody
$('#precedent').html( '<a href="javascript:void(0);" onclick="chargerTableau('+(myArray.start-myArray.pas>0?myArray.start-myArray.pas:0)+')">Precedent</a>' ); // on génère l'html du lien de la page précédente, et cela à partir des données passé en JSON
$('#suivant').html( '<a href="javascript:void(0);" onclick="chargerTableau('+(myArray.start+myArray.pas<=(myArray.total)?myArray.start+myArray.pas:myArray.total)+')">Suivant</a>' );
},
error:function(){ // on gère un message en cas d'erreur
alert( 'La requ\352te que vous demandez n\'est pas accessible.' + "\n" + 'Veuillez nous en excuser !' );
}
});
}
Le lien pour télécharger les fichiers sources : json.
0 commentaire
Pas de commentaire.
Flux RSS des commentaires de cet article. TrackBack URL
Laisser un commentaire