Subdiviser le résultat d'une recherche en pages

Soyez le premier à donner votre avis sur cette source.

Vue 3 801 fois - Téléchargée 337 fois

Description

My Code is short, but it is strong !!

Dans ce code je vous propose une source d'une importance capitale dans le développement de sites dynamiques a recherche.

dans un travail personnel, j'ai eu besoin d'organiser le résultat de la recherche en page et, j'ai Googlé, yahooté mais pas moyen.

Principes:
A - HTML :

1- Le contenu d'un élément du résultat de la recherche doit être inséré à l'intérieur d'un <DIV class="result ...>Contenu élément Du résultat</DIV>. Ces DIV sont à générer par un script php,asp,..

2- Vous devez réserver une div dans laquelle seront mis les liens de navigation

B - JAVASCRIPT :

Dans script on 4 parties:

1 - Déclaration des variables
2 - Génération des liens de navigation
3 - Définitions des comportement des lien de navigation(function())
4 - Simulation d'un clic sur le premier lien de navigation

Inutile d'expliquer le code car j'ai mis suffisamment de commentaires pour qu'il soit claire.

Amusez vous bien !! !

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="jquery-1.7.1.min.js"></script>
  
  <script>
  //Definition des variables
  var SubSetSize=4; //Nombre d'éléments du résultat par page <-----> à definir selon votre besoin
  
  var TotalResults=0;//Nombre d'éléments du résultat par page <-------->  Se calcule automatiquement
  var LastSubSetLinkIndex=-1; //Index sur le dérnier lien de navigation visité
	  
  $(document).ready(function(){
   
	LastSubSetLinkIndex=-1
	var NumberOfSubSets=0;// Nombre de pages
	
   
	TotalResults=parseInt($(".result:last").index(".result"))+1;// Nombre d'element = dernier index +1 (si on 20 elemnts ===> index[0,1,...19]===>TotalResults=19+1=20) 
	
	NumberOfSubSets=parseInt(TotalResults/SubSetSize);// Nombre de page=20/4=5
	
    
	if((TotalResults%SubSetSize)!=0)   NumberOfSubSets++; // dans le cas ou la division daonne un reél <---> 20/3=6.66=6 donc ajouter un 1 
	
	//insertion des liens de navigation
	$("#links").append('<a style="margin:5px" class="PreviousSubSetLink" href="javascript:">Previous</a>');
	for(var i=1;i<=NumberOfSubSets;i++){
	    $("#links").append('<a style="margin:5px" class="SubSetLink" href="javascript:">'+i+'</a>');
	}
        $("#links").append('<a style="margin:5px" class="NextSubSetLink" href="javascript:">Next</a>');
    
	//Cacher les element du résultat
	$(".result").hide();
        $(".SubSetLink").hide();
	
	$(".SubSetLink:first").click(); //Cet appel est sans effet a ce stade, car $(".SubSetLink").click() n'est pas encore définie
   
  });
  
 
  
$(function(){

//Click sur un lien de navigation

$(".SubSetLink").click(function(){
	if($(".SubSetLink").index(this)!=LastSubSetLinkIndex){ /*s'assurer que ce lien n'est pas le dérnier lien de navigation visité*/
		
		//Borne de la page sur l'ensemble des elements du résultat
		var min_index = ($(".SubSetLink").index(this))*SubSetSize;
		var max_index=min_index+SubSetSize;
		
		
		// Jouer sur les couleur et les taille des lien de navigation
		$(".SubSetLink").css("font-size","16px");
		$(".SubSetLink").css("color",$(this).css("color"));
		
		$(this).css("font-size","20px");
		$(this).css("color","#f08888");
		
		
		
		//cacher de nouveau tous les element du résultat					
		$(".result").hide();
		
		//cacher de nouveau tous les element du résultat
		for	(var i=min_index;i<max_index;i++)$(".result:eq("+i+")").show(500);
		
		//cacher de nouveau tous les lien de navigation
		$(".SubSetLink").hide();
		
		//Borne de plage des lien de navigation a afficher
		min_index=$(".SubSetLink").index(this)-2;
		max_index=$(".SubSetLink").index(this)+2;
		
		while(min_index<0) {min_index++;max_index++;}
		
		//afficher les liens de navigation de la plage correspondante
		while(max_index>$(".SubSetLink:last").index(".SubSetLink")) {min_index--;max_index--;}
		
		for	(var i=min_index;i<=max_index;i++)$(".SubSetLink:eq("+i+")").show("slow");
		
		
		//Noter que ce lien est le dérnier visité
		LastSubSetLinkIndex=$(".SubSetLink").index(this);
		
		
	}
	
	 

});	
//Click sur Previous
$(".PreviousSubSetLink").click(function(){
	if(LastSubSetLinkIndex!=$(".SubSetLink:first").index(".SubSetLink")){ /*S'assurer qu'on est pas sur la premiere page*/
		var index=LastSubSetLinkIndex-1;	
		$(".SubSetLink:eq("+index+")").click();
					
	}       

});

//Click sur Next
$(".NextSubSetLink").click(function(){
	if(LastSubSetLinkIndex!=$(".SubSetLink:last").index(".SubSetLink")){ /*S'assurer qu'on est pas sur la derniere page*/
		var index=LastSubSetLinkIndex+1;	
		$(".SubSetLink:eq("+index+")").click();
					
	}      

 });

});
   
$(document).ready(function(){
  // cliquer sur le premier lien de navigation  
$(".SubSetLink:first").click(); //Maintenant cet appel fait quelque chose
   
});
  
  </script>
  
</head>
<body>
<center>
<div >
    <!-- <div's  suivant sont généré par un script php/asp  ... -->
	<div style="width:200px;height:120px;background:#E0E0E2" class="result">
	<p>Result 0</p>
	</div>
        <div style="width:200px;height:120px; background:#E0E0E2" class="result">
	<p>Result 1</p>
	</div>
	<div style="width:200px;height:120px; background:#E0E0E2" class="result">
	<p>Result 2</p>
	</div>
	<div style="width:200px;height:120px; background:#E0E0E2" class="result">
	<p>Result 3</p>
	</div>
	<div style="width:200px;height:120px; background:#E0E0E2" class="result">
	<p>Result 4</p>
	</div>
	<div style="width:200px;height:120px; background:#E0E0E2" class="result">
	<p>Result 5</p>
	</div>
	<div style="width:200px;height:120px; background:#E0E0E2" class="result">
	<p>Result 6</p>
	</div>
	<div style="width:200px;height:120px; background:#E0E0E2" class="result">
	<p>Result 7</p>
	</div>
	<div style="width:200px;height:120px; background:#E0E0E2" class="result">
	<p>Result 8</p>
	<div style="position:relative;right:5px;bottom:2px;width:50px;height:20px"><a href="">details</a></div>
	</div>
	<div style="width:200px;height:120px; background:#E0E0E2" class="result">
	<p>Result 9</p>
	</div>
	<div style="width:200px;height:120px; background:#E0E0E2" class="result">
	<p>Result 10</p>
	</div>
	
		<div style="width:200px;height:120px;background:#E0E0E2" class="result">
		<p>Result 11</p>
		</div>
	        <div style="width:200px;height:120px; background:#E0E0E2" class="result">
		<p>Result 12</p>
		</div>
		<div style="width:200px;height:120px; background:#E0E0E2" class="result">
		<p>Result 13</p>
		</div>
		<div style="width:200px;height:120px; background:#E0E0E2" class="result">
		<p>Result 14</p>
		</div>
		<div style="width:200px;height:120px; background:#E0E0E2" class="result">
		<p>Result 15</p>
		</div>
		<div style="width:200px;height:120px; background:#E0E0E2" class="result">
		<p>Result 16</p>
		</div>
		<div style="width:200px;height:120px; background:#E0E0E2" class="result">
		<p>Result 17</p>
		</div>
		<div style="width:200px;height:120px; background:#E0E0E2" class="result">
		<p>Result 18</p>
		<div style="position:relative;right:5px;bottom:2px;width:50px;height:20px"><a href="">details</a></div>
		</div>
		<div style="width:200px;height:120px; background:#E0E0E2" class="result">
		<p>Result 19</p>
		</div>
		<div style="width:200px;height:120px; background:#E0E0E2" class="result">
		<p>Result 20</p>
		</div>
		
			<div style="width:200px;height:120px;background:#E0E0E2" class="result">
			<p>Result 21</p>
			</div>
		        <div style="width:200px;height:120px; background:#E0E0E2" class="result">
			<p>Result 22</p>
			</div>
			<div style="width:200px;height:120px; background:#E0E0E2" class="result">
			<p>Result 23</p>
			</div>
			<div style="width:200px;height:120px; background:#E0E0E2" class="result">
			<p>Result 24</p>
			</div>
			<div style="width:200px;height:120px; background:#E0E0E2" class="result">
			<p>Result 25</p>
			</div>
			<div style="width:200px;height:120px; background:#E0E0E2" class="result">
			<p>Result 26</p>
			</div>
			<div style="width:200px;height:120px; background:#E0E0E2" class="result">
			<p>Result 27</p>
			</div>
			<div style="width:200px;height:120px; background:#E0E0E2" class="result">
			<p>Result 28</p>
			<div style="position:relative;right:5px;bottom:2px;width:50px;height:20px"><a href="">details</a></div>
			</div>
			<div style="width:200px;height:120px; background:#E0E0E2" class="result">
			<p>Result 29</p>
			</div>
			<div style="width:200px;height:120px; background:#E0E0E2" class="result">
			<p>Result 30</p>
			</div>
</div>
<div id="links">

</div>
</center>
</body>
</html>

Conclusion :


J'aimerais bien recevoir vos notifications à l'usage de ce code
car j'aurait pour vous d'aures astuces dans mon magasin

Bon Usage !

Hakim Kabyl

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

c'est l'un des meilleurs codes que j'ai vu postés ici, Dieu sais s'il y en a de très bons... Il est efficace et facile à manipuler, chez nous on dit merci grand!
Messages postés
3
Date d'inscription
lundi 18 octobre 2010
Statut
Membre
Dernière intervention
16 avril 2012

Merci beaucoup pour ce code que tu a poster car il m'a été d'une grande importance pour mon site.

A plus tard
Messages postés
7
Date d'inscription
lundi 27 novembre 2006
Statut
Membre
Dernière intervention
3 novembre 2014

Bonjour Vincseise,

Des méthodes classiques, ce n'est pas ce qui manque,

Dans une méthode classique, a chaque fois que l'internaute clique sur suivant ou précédent, on sollicite le serveur avec nouvelle requête (mysql: SELECT....LIMIT i,i+5 par exemple) pour récuperer une nouvelle page.

Mais dans le code que j'ai proposé, ce n'est pas le cas. l'ensemble de résultat est chargé mais en résumé(comme dans la boite de messagerie:L'ensemble des Titre,Date de Réception est chargé mais pas le contenu des messages). et pour voir le détail on fait un Jquery.POST ou ajax et charger le détail sur une Dialog ou une
initialement invisible.
Messages postés
113
Date d'inscription
mardi 25 février 2003
Statut
Membre
Dernière intervention
28 mars 2010

Bonjour:

a mon avis y'a plus simple:

proposition rapidement

-------------------------------------------------------------------

- recuperer $n_result ( pour calculer le $n_page)via une requete mysql

- un
[content.php]

- bottom page 1 / 2 / 3 ( avec liens/ a ref script ajax
(#mon_resultat).load.content(content.php) auquel tu passes en data: le param $page)

- load_content.php: ton result et affichage via requete mysql

----------------

du coup, le seul chtit truc tricky à trouver, c'est le calcul de quels rows (ID) à recuperer
en fonction du nombre de pages, et du nombres de resultat à afficher;

--------

PS: je posterais une source dès que possible
Messages postés
7
Date d'inscription
lundi 27 novembre 2006
Statut
Membre
Dernière intervention
3 novembre 2014

Bonjour a tous,

Je sais que vous aurez des difficultés à adapter ce code dans un site dynamique ou les éléments

sont générées par un script php/asp/...

Moi je l'ai fait même avec une recherche ajax.

vous pouvez me contacter a epm(point)soft(at)gmail(point)com au cas ou
Afficher les 6 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.