[Résolu] Problème de pagination

Bonjour à tous !

Je débute dans le javascript, et je me suis mis récemment à l'Ajax.
J'essaye de faire un système de pagination qui se présente comme tel :

-Je récupère des données depuis un fichier .xml
-Je les affiche dans un tableau par tranche de 10.
-La pagination permet de faire suivant, precedent, derniere page, premiere page.
-Enfin des numéros permettent d'allez directement en page1, page2, page3 etc

Pour ce qui est d'afficher les résultat par tranche de 10 aucun soucis. Idem pour les bouton precedent, suivant, premiere page et derniere page.
J'arrive également à afficher dynamiquement les bouton "page1", "page2" etc de cette façon :
- par défault on est sur la page 1 (numPage=0) : on a les 10 premiers éléments dans le tableau et les boutons page1,2,3,4,5,6,7,8,9,10.
- page 2 (numPage=1): on a les 10 éléments suivants dans le tableau et les boutons page2,3,4,5,6,7,8,9,10,11 ..
etc

Vous aurez compris qu'on a toujours 10 boutons "raccourci" : squelette de la pagination :
premiere page, precedent, page x, page x, page x, page x, page x, page x, page x, page x, page x, page x, suivant, derniere page.

Encore une fois sans soucis pour le moment.

Le problème : quand je génère mes boutons page x, je leur attribut une value (le bouton 'page 1 aura pour value 0 et je relance ensuite la fonction chargée de l'affichage de mon tableau en passant en parametre numPage=0. Cela fonctionne si et seulement si j'appuie sur un bouton raccourci dès le début (à l'ouverture de la page), si j'ai le malheur de faire suivant ou precedent et d'ensuite choisir la page x, rien ne se passe.

Pour être plus clair voici mon url perso avec mon exercice dessus : http://jon4221.free.fr/pagination/jquery.html , faite le test en séléctionnant L1.


.js :

var loaderShow;
	jQuery(document).ready(function() { 
	$('#pagination').css({'visibility' : 'hidden'}); //par défault cache tous les boutons
			/*cette fonction est pratique car le code qu'elle contient est exécuté que quand la page est chargée (sauf les images)
			quand la fonction est prise en compte on est sur que tous les éléments html étaient bien chargés, on est sur qu'elle a pu prendre tout en considération*/
			




			// chargement des villes par choix de régions
			$('#titre_club').html('<h2 style="margin-bottom:12px;margin-top:0px;">Championnat :</h2>');  // Par défault affiche Championnat :
				$('#region').change(function() {  // L'événement .change est envoyé à l'élément region lorsque sa valeur est modifiée. Quand on change de régions :
					$('tr').remove(); //Pour que le tableau efface les tr précedemments afficher, sinon fait que des ajouts.
					$('#suivant').css({'visibility' : 'hidden'}); //par défault le bouton suivant est masqué
					$('#precedent').css({'visibility' : 'hidden'}); //par défault le bouton precedent est masqué
					$('#first').css({'visibility' : 'hidden'}); //par défault le bouton first est masqué
					$('#last').css({'visibility' : 'hidden'}); //par défault le bouton last est masqué
					$('#div_boutons').empty();  //pour vider la pagination
					if ($(this).attr('selectedIndex') != 0) {  //Si la position est différent de 0 (si on a pas séléctionné le championnat = 0) faire :
						$.ajax({
							type: 'GET',
							beforeSend : function() {
								$('#loader').fadeIn();	  //affiche le gif qui charge
							},
							url: 'xml/villes'+$(this).attr('selectedIndex')+'.xml', /* Va chercher dans le xml/villes/récupération de l'index.xml
																      	Donc on aura la premier champ relié à villes1.xml, le deuxieme relié à villes2.xml etc */
							
							dataType: 'xml', 
							data : 'region='+$(this).val(),  // val.() est principalement utilisée pour obtenir les valeurs des éléments de formulaire comme input,select
							success: function(xmlDoc, status) { //régions1/2/3/etc obtiennent leurs input
							var imax = 0;
								$(xmlDoc).find('ville').each(function() { //cherche tous les <ville> du xml
									imax = imax+1;  					  //à la fin du each, xmax = nombre total de ville
								});
								var nombrePage = (Math.floor(imax/10)+1); //permet de savoir le nombre total de page
	
								//ajout tableau de droite
								var titre = $('#region').val(); //crée variable titre qui est égal au championnat selectionné
								$('#titre_club').html('<h2 style="margin-bottom:12px;margin-top:0px;">'+titre+'</h2>');  //affichage dans div "titre_club"
								
								var numPage = 0; //par défaut on est dans les 10 premier éléments.
								affiche_page(xmlDoc,numPage);	//fonction qui affiche les 10 éléments en fonction de numPage
								affiche_pagination(numPage,nombrePage);
								
								$("#suivant").click(function() { //si on clic sur suivant on passe au 10 éléments suivant
									numPage = numPage+1;
									$('#liste_club').empty(); //efface liste 
									$('#div_boutons').empty();
									affiche_page(xmlDoc,numPage); 
									affiche_pagination(numPage,nombrePage);
								});
								$("#precedent").click(function() { //si on clic sur precedent on passe au 10 éléments precedent
									numPage = numPage-1; 
									$('#liste_club').empty(); 
									$('#div_boutons').empty();
									affiche_page(xmlDoc,numPage); 
									affiche_pagination(numPage,nombrePage);
								});
								
								$("#first").click(function() { //si on clic sur precedent on passe au 10 premiers elements
									numPage = 0; 
									$('#liste_club').empty(); 
									$('#div_boutons').empty();
									affiche_page(xmlDoc,numPage); 
									affiche_pagination(numPage,nombrePage);
								});
								
								
								$("#last").click(function() { //si on clic sur precedent on passe au 10 derniers elements
									numPage = nombrePage-1; 
									$('#liste_club').empty(); 
									$('#div_boutons').empty();
									affiche_page(xmlDoc,numPage); 
									affiche_pagination(numPage,nombrePage);
								});
								
								$("li").click(function() {
									$('#liste_club').empty(); 
									$('#div_boutons').empty();
									numPage = $(this).attr("value");
									affiche_page(xmlDoc,numPage);
									affiche_pagination(numPage,nombrePage);
									
								});
								
								
								
							delayForLoader();
							}
						});
					}
					else{
					$('#titre_club').html('<h2 style="margin-bottom:12px;margin-top:0px;">Championnat :</h2>');  //sinon on voit Championnat en titre
					
					}
					
				});

				
				
				
				
				
function affiche_page(xmlDoc,numPage){ //fonction qui affiche par tranche de 10 suivant le numPage
var i=0;
var j=0;
var ville = new Array(); //creation taableau qui va contenir les clubs
	$(xmlDoc).find('ville').each(function() { //pour tous les clubs trouvés (ville)
		i = i+1; //en dehors des if, i = donc le nombre totale de clubs
		if ( (i >(10*numPage)) && (i <=(10*(numPage+1))) ) { //récupere 10 clubs suivant le numPage
			ville[i] = $(this).text(); //ajouts des 10 clubs dans le tableau
			var tr = $('<tr style="height:18px;"><td></td></tr>').appendTo('#liste_club'); // div liste_club recoit variable tr contenant <tr><td></td></tr>
			$(tr).text(ville[i]); //variable tr recoit tableau
			j = i; //j est égal à i, qui lui est égal à la derniere valeur de la tranche de 10
		}		
	});
	
		if (i > 10) { //si plus de 10 bouton,  suivant, precedent, first et last visibles
			$('#suivant').css({'visibility' : 'visible'});
			$('#precedent').css({'visibility' : 'visible'});
			$('#last').css({'visibility' : 'visible'}); 
			$('#first').css({'visibility' : 'visible'}); 
		}
		
		if (numPage == 0) { //si numPage = 0, si on est sur la page 1, alors bouton precedent caché.
			$('#precedent').css({'visibility' : 'hidden'});
			$('#first').css({'visibility' : 'hidden'});
		}
		
		if (i < 10) { //si moins de 10 aucun bouton
			$('#div_boutons').css({'visibility' : 'hidden'});
		}
		

		//pour cacher le suivant et le last en derniere page
		if (j == i) { //si j (la derniere valeur de la tranche de 10) est égal à i (ici i = nombre totale de clubs), nous sommes alors au dernier élément donc :
			$('#suivant').css({'visibility' : 'hidden'}); //cacher bouton suivant
			$('#last').css({'visibility' : 'hidden'}); //cacher bouton suivant
		}		
		
		
		
}// fin de la fonction affiche_page

function affiche_pagination(numPage,nombrePage){

								
	$('#div_boutons').css({'visibility' : 'visible'});
	if (nombrePage !=1 ){ //si le nombre de page n'est pas égal à 1 (si il y a plusieurs pages)
		
		for (b=numPage; b<(numPage+10); b++){ //pour un départ au numPage actuel, avec incrémentation jusqu'à numPage+10
		
			if (b<nombrePage){ //b inférieur ou égal au nombre de page
				$('#div_boutons').append('<li value="'+(b+1)+'">'+(b+1)+'</li>');
			}
		}
	}
	
}// fin de la fonction affiche_pagination
								

				
				
			
									
	});
/*}*/


// supprimer le loader après un certain temps
function delayForLoader() {                    //fonction lancé apres selection de la ville
	loaderShow = setTimeout(hideLoader, 1000); //loaderShow initialisé en haut. setTimeout(plus compatible) VS setInterval hideloader est une référence à une fonction	 
}
function hideLoader() {                        //fonction appelé par delayForLoader qui anime l'opacité de la div loader grace au .fadeOut
	$('#loader').fadeOut('slow');			   //Une fois l'opacité atteint 0, la propriété de style d'affichage est fixé à non.	
	clearInterval(loaderShow);				   // ???????????
}

[/i][/i]
Modifié par lele91 (09 May 2012 - 10:48)

Tu veux pas le poster une troisième fois pour être sûr ?

Désolé pour le doublon, fausse manip. Je n'arrive pas a supprimer le premier post, désolé !

Bonjour,
Dans affiche_page, tu modifies la propriété css visibility pour les boutons de navigation suivant, précédent, last et first, ils sont toujours présents sur ta page mais cachés.
En revanche tes éléments li de navigation sont supprimés :

$('#div_boutons').empty();

Donc les événements liés à ces noeuds existent toujours mais sur des noeuds qui, eux, n'existent plus.
Tu recrées bien des noeuds dans affiche_pagination mais sans leur attribuer d'événement.
Cet événement :

$("li").click(function() { ... });

ne se déclenchera que sur les noeuds qui existent à la création de l'événement, tu dois le réaffecter aux nouveaux noeuds créés dans affiche_pagination.
Attention toutefois aux fuites de mémoire.

Grace à l'aide de Gothor, qui m'a proposé de faire passer xmlDoc en variale, afin de ne jamais le perdre, tout fonctionne très bien !

Merci beaucoup !