11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Pagination Ajax

Bonjour c'est encore moi ^^

Je me lance dans une pagination en Ajax.
Le but est d'afficher dans un tableau les éléments (10) d'un fichier .xml et d'avoir dans chaque page l'affichage d'un .xml différent.
En page 1 on aura les 10 éléments de villes1_1.xml, en page 2 on aura les 10 éléments de villes1_2.xml, etc..
J'ai donc des boutons suivant, precedent, first et last et des boutons qui pointent vers la page1,2,3 etc
Tout est ok pour les boutons precedent suivant last et first, ainsi que les raccourcis vers les page 1, 2, 3etc mais si je clic sur page 2 par exemples, je tombe bien sur la deuxième page mais les boutons precedent suivant last et first ne marcheront plus.
J'ai bien essayé de remettre ces même bouton dans ma fonction "affiche_page", sans succès..

Ma page est consultable ici : (essayez avec le champ L1) :
http://jon4221.free.fr/pagination2/jquery.html


Voici mon .js :


jQuery(document).ready(function() {
    var xmlDoc;
    var nombrePage;
	var numPage = 1; //quand on change de championnat on retombe sur la page 1
    $('#pagination').css({'visibility' : 'hidden'});
    $('#titre_club').html('<h2 style="margin-bottom:12px;margin-top:0px;">Championnat :</h2>'); 

    $('#region').change(function() {
		numPage = 1;
		indice_region = $(this).attr('selectedIndex');
		// 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, #precedent, #first, #last').css({'visibility' : 'hidden'});
		$('#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'+indice_region+'_1.xml',
				dataType: 'xml',
				data : 'region='+$(this).val(),  
				success: function(document, status) { 
					xmlDoc = document;
					var imax = 111;
					$(xmlDoc).find('ville').each(function() { //cherche tous les <ville> du xml
						imax = imax+1;                        //à la fin du each, xmax = nombre total de ville
					});
					nombrePage = (Math.ceil(imax/10)); //permet de savoir le nombre total de pages
					
					
					//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"
					affiche_page(numPage,nombrePage);
				}
			});
		}
		else { // SI on est sur l'indice_region 0
                $('#titre_club').html('<h2 style="margin-bottom:12px;margin-top:0px;">Championnat :</h2>');
		}
	});

					
					
					
	//DEBUT CLICK SUIVANT
    $("#suivant").click(function() {
			numPage++;
			affiche_page(numPage,nombrePage);
    });
	// FIN CLICK SUIVANT
						
	//DEBUT CLICK PRECEDENT
    $("#precedent").click(function() {
			numPage--;
			affiche_page(numPage,nombrePage);
    });
	// FIN CLICK PRECEDENT		

	//DEBUT CLICK FIRST
    $("#first").click(function() {
			numPage=1;
			affiche_page(numPage,nombrePage);
	});
	// FIN CLICK FIRST	
	
	//DEBUT CLICK LAST
    $("#last").click(function() {
			numPage=(nombrePage-1);
			affiche_page(numPage,nombrePage);
	});
	// FIN CLICK LAST		
	
	
	
        function affiche_page(numPage,nombrePage) { 
			$.ajax({
				type: 'GET',
				url: 'xml/villes'+indice_region+'_'+numPage+'.xml',
				dataType: 'xml',
				data : 'region='+$(this).val(), 
				success: function(document, status) { 
					xmlDoc = document;
					var imax = 111;
						$(xmlDoc).find('ville').each(function() { //cherche tous les <ville> du xml
							imax = imax+1;                        //à la fin du each, xmax = nombre total de ville
						});
					
					
					$('#liste_club').empty();
            var i=0;
            var ville = new Array(); //creation tableau qui va contenir les clubs
            $(xmlDoc).find('ville').each(function() { //pour tous les clubs trouvés (ville)
                i = i+1;
               if ( (i >(numPage/numPage)-1) && (i <=(10*(numPage/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
                    }
                });
			
			if (numPage == 1) {
				$('#suivant').css({'visibility' : 'visible'});
				$('#last').css({'visibility' : 'visible'});
				$('#precedent').css({'visibility' : 'hidden'});
				$('#first').css({'visibility' : 'hidden'});
                }

			if (numPage != 1) {
				$('#suivant').css({'visibility' : 'visible'});
				$('#last').css({'visibility' : 'visible'});
				$('#precedent').css({'visibility' : 'visible'});
				$('#first').css({'visibility' : 'visible'});
                }
				
			if (numPage == (nombrePage-1)) {
				$('#suivant').css({'visibility' : 'hidden'});
				$('#last').css({'visibility' : 'hidden'});
				$('#precedent').css({'visibility' : 'visible'});
				$('#first').css({'visibility' : 'visible'});
                }
				
            affiche_pagination(numPage,nombrePage);
					}})
					
            
            }// fin de la fonction affiche_page

			
			
			
			
			
        function affiche_pagination(numPage,nombrePage) {
            $('#div_boutons').empty();
            $('#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)+'">'+(b)+'</li>');
                        }
                    }
                $('li').click(function() {
                    numPage = $(this).attr("value");
					affiche_page(numPage,nombrePage);
                    });
					
					 
                }
				
            }// fin de la fonction affiche_pagination
        });



Merci pour votre aide et je précise que je me suis mit au Javascript depuis 1 mois Smiley murf [/i][/i]
Modifié par lele91 (11 May 2012 - 10:24)
Yop,

Tes fonctions affiche_page et affiche_pagination prennent les paramètres numPage et nombrePages, enlève ces paramètres, ils ne servent à rien étant donné que les variables numPage et nombrePages sont définies au même niveau que tes fonctions.
Magnifique !!
Effectivement en ne mettant pas de parametre dans mes fonctions ça marche nikel.
Peux tu me rééxpliquer pourquoi ces parametres sont inutils ?



Voici le .js à jour :

var loaderShow;
jQuery(document).ready(function() {
    var xmlDoc;
    var nombrePage;
	var numPage = 1; //quand on change de championnat on retombe sur la page 1
    $('#pagination').css({'visibility' : 'hidden'});
    $('#titre_club').html('<h2 style="margin-bottom:12px;margin-top:0px;">Championnat :</h2>'); 

    $('#region').change(function() {
		numPage = 1;
		indice_region = $(this).attr('selectedIndex');
		// 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, #precedent, #first, #last').css({'visibility' : 'hidden'});
		$('#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'+indice_region+'_1.xml',
				dataType: 'xml',
				data : 'region='+$(this).val(),  
				success: function(document, status) { 
					xmlDoc = document;
					var imax = 111;
					$(xmlDoc).find('ville').each(function() { //cherche tous les <ville> du xml
						imax = imax+1;                        //à la fin du each, xmax = nombre total de ville
					});
					nombrePage = (Math.ceil(imax/10)); //permet de savoir le nombre total de pages
					
					//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"
					affiche_page();
				}
			});
		}
		else { // SI on est sur l'indice_region 0
                $('#titre_club').html('<h2 style="margin-bottom:12px;margin-top:0px;">Championnat :</h2>');
		}
	});

					
					
					
	//DEBUT CLICK SUIVANT
    $("#suivant").click(function() {
			numPage++;
			affiche_page();
    });
	// FIN CLICK SUIVANT
						
	//DEBUT CLICK PRECEDENT
    $("#precedent").click(function() {
			numPage--;
			affiche_page();
    });
	// FIN CLICK PRECEDENT		

	//DEBUT CLICK FIRST
    $("#first").click(function() {
			numPage=1;
			affiche_page();
	});
	// FIN CLICK FIRST	
	
	//DEBUT CLICK LAST
    $("#last").click(function() {
			numPage=(nombrePage-1);
			affiche_page();
	});
	// FIN CLICK LAST		
	
	
	
        function affiche_page() { 
			$.ajax({
				type: 'GET',
				url: 'xml/villes'+indice_region+'_'+numPage+'.xml',
				dataType: 'xml',
				data : 'region='+$(this).val(), 
				success: function(document, status) { 
					xmlDoc = document;
					var imax = 111;
						$(xmlDoc).find('ville').each(function() { //cherche tous les <ville> du xml
							imax = imax+1;                        //à la fin du each, xmax = nombre total de ville
						});
					
					
					$('#liste_club').empty();
            var i=0;
            var ville = new Array(); //creation tableau qui va contenir les clubs
            $(xmlDoc).find('ville').each(function() { //pour tous les clubs trouvés (ville)
                i = i+1;
               if ( (i >(numPage/numPage)-1) && (i <=(10*(numPage/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
                    }
                });
			
			if (numPage == 1) {
				$('#suivant').css({'visibility' : 'visible'});
				$('#last').css({'visibility' : 'visible'});
				$('#precedent').css({'visibility' : 'hidden'});
				$('#first').css({'visibility' : 'hidden'});
                }

			if (numPage != 1) {
				$('#suivant').css({'visibility' : 'visible'});
				$('#last').css({'visibility' : 'visible'});
				$('#precedent').css({'visibility' : 'visible'});
				$('#first').css({'visibility' : 'visible'});
                }
				
			if (numPage == (nombrePage-1)) {
				$('#suivant').css({'visibility' : 'hidden'});
				$('#last').css({'visibility' : 'hidden'});
				$('#precedent').css({'visibility' : 'visible'});
				$('#first').css({'visibility' : 'visible'});
                }
				
            affiche_pagination();
					}})
					
            
            }// fin de la fonction affiche_page

			
			
			
			
			
        function affiche_pagination() {
            $('#div_boutons').empty();
            $('#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)+'">'+(b)+'</li>');
                        }
                    }
                $('li').click(function() {
                    numPage = $(this).attr("value");
					affiche_page();
                    });
					
					 
                }
				
            }// fin de la fonction affiche_pagination
        });




Smiley biggrin Smiley biggrin Smiley biggrin Smiley biggrin Smiley biggrin Smiley biggrin [/i][/i]
Modifié par lele91 (11 May 2012 - 10:30)
Gothor a écrit :
Yop,

Tes fonctions affiche_page et affiche_pagination prennent les paramètres numPage et nombrePages, enlève ces paramètres, ils ne servent à rien étant donné que les variables numPage et nombrePages sont définies au même niveau que tes fonctions.



En tout cas j'en vois le bout de cette pagination ! Smiley lol
Tu envoyais des paramètres inutiles à tes fonctions étant donné qu'ils sont déjà stockés dans des variables auxquelles elles ont directement accès.
En rajoutant à tes fonctions des paramètres numPage et nombrePages, ce sont elles qui allaient être utilisées par tes fonctions et non celles que tu as définies en dehors.
Du coup, lors du clic sur un des boutons de numéro de page, ce n'était pas la variable numPage qui était modifiée mais bien le paramètre numPage (qui est aussi une variable, mais une autre...) En plus, ça prenait de la place en mémoire pour rien...
Ainsi, les paramètres envoyés ne sont pas stockés et ce sont les bonnes variables qui sont utilisées.
Bjr,

J'aimerai savoir s'il est possible de garder une pagination en ajax si il y a changement de page et la page a loadé (page loading) Smiley lol
Sujet clos
Aller à