Réorganisé des données sans recharger la page

Quand on affiche des données sur un site, il est parfois utile de les affichés d’une autre manière par exemple par ordre croissant ou par date… et pour cela on doit recharger la page. Heureusement avec Jquery on peut éviter ça.

Pour cela on utilise un code HTML simple qui se compose de deux boutons radio:

Classement des éléments:
<input type="radio" for="classement_croissant" name="classement_donnees" value="croissant"/> <label for="classement_croissant">Croissant,</label>
<input type="radio" for="classement_decroissant" name="classement_donnees" value="decroissant"/> <label for="classement_decroissant">Décroissant.</label>

On peut bien sûr en rajouter…

Ensuite du côté de Jquery, il suffit de détecter le clique sur le bouton et on récupère sa valeur avec val():

$(document).ready(function() {

	$(document).on('click', 'input[name=classement_donnees][type=radio]', function() {
		alert( $(this).val() );
	});

});

Ce code est assez simple, il attend un clique sur l’input qui à pour name `classement_donnees` et qui est de type `radio` et affiche dans une petite popup sur ce vous avez cliqué.

Pour finir on va ajouter une requête ajax vers une page auquel on envoie le classement que l’ont veut utiliser. Le résultat obtenu sera affiché dans une div qui à pour id test:

$(document).ready(function() {

	$(document).on('click', 'input[name=classement_donnees][type=radio]', function() {
		$.ajax({
			url: './votre_page.php', // La page ou on récupère les données
			type: 'POST', // Le type: GET ou POST
			data: {'classement_donnees': $(this).val()},
			timeout: 5000, // Après 5 seconde on arrête si c'est trop long
			dataType: 'html', // Le type de données qu'on récupère, on pourrait mettre json si on veut
			success: function(donnees) {
				$("#test").html(donnees); // On affiche les données
			},
			error: function(XMLHttpRequest,textStatus, errorThrown){
				$("#test").html('Erreur '+errorThrown);
			},
		});
		return false;
	});
});