Subdiviser le résultat d'une recherche en pages

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (kimmp)