Trier des annonces par prix

**mouls22** · 28/01/2022, 20h41

Bonjour, je sollicite votre aide car je souhaite trier mes annonces selon le prix. J'ai fait des recherches mais je trouve seulement le tri avec des tableaux.

Voici mon

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="container"> 
<div class="slider" >
<img class ="active" style="width:240px; height:170px;" src="/no_image.png">
</div>
<div class= "informations">
<a class="maquette" href="/principales/single.php?id=29"  >
 <p class='title'>vente de velo1</p>
<p class='price'><span class='price'>Prix :</span> 10</p>
<p class='date'> <i class='fa fa-calendar'></i> 2022-01-28</p>
<p class='city'> <i class='fa fa-map-marker' style='font-size:15px'></i>Ville A</p></a>
</div>
</div>
 
<div class="container"> 
<div class="slider" >
<img class ="active" style="width:240px; height:170px;" src="/no_image.png">
</div>
<div class= "informations">
<a class="maquette" href="/principales/single.php?id=30"  >
 <p class='title'>Vente de vélo2</p>
<p class='price'><span class='price'>Prix :</span> 20</p>
<p class='date'> <i class='fa fa-calendar'></i> 2022-01-28</p>
<p class='city'> <i class='fa fa-map-marker' style='font-size:15px'></i>Ville B</p></a>
</div>
</div>

**NoSmoking** · 29/01/2022, 17h18

Bonjour,
le principe est « assez simple », il te faut récupérer les conteneurs ciblés, extraire la valeur pour le tri, stocker cela dans un array, l'élément et la valeur.

Une fois cela fait, tu tries suivant la valeur et tu réinjectes les éléments dans le parent.

Traduit en code cela pourrait ressembler à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// récup. des élémenst à trier
const elements = document.querySelectorAll(".container");
const datas = [];
elements.forEach((el) => {
  // récup. des données
  const elSearch = el.querySelector(".price");
  // récup. le text qui suit le <span class='price'>
  const value = +elSearch.nextSibling.textContent;
  // on stcke l'élément conteneur et la valeur pour le tri
  datas.push([el, value]);
});
// tri suivant la valeur ordre croissant
datas.sort((a,b) => {
  return a[1] -b[1];
})
// reinjection des éléments dans le nouvel ordre
const elemParent = elements[0].parentNode;
datas.forEach((el) => {
  elemParent.appendChild(el[0]);
});

si besoin de plus d'info n'hésite pas !

**mouls22** · 29/01/2022, 20h52

Bonjour NoSmoking et merci pour tes explications. Comment faudrait-il faire pour lier le code à un select de type:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
			<div class="prix-condition">
				<span>trier par le prix</span>
				<select name="" id="select">
					<option value="Default">Default</option>
					<option value="LowToHigh">Du plus bas au plus haut</option>
					<option value="HighToLow">Du plus haut au plus bas</option>
				</select>
			</div>
 
 
			<div class="superficie-condition">
				<span>trier par la superficie</span>
				<select name="" id="select">
					<option value="Default">Default</option>
					<option value="LowToHigh">Du plus bas au plus haut</option>
					<option value="HighToLow">Du plus haut au plus bas</option>
				</select>
			</div>

**NoSmoking** · 30/01/2022, 10h31

Avant de continuer, et compte-tenu que la suite passera par une fonction générique, il serait bon que tu crées ton code HTML de façon plus « rigoureuse ».

Cela pourrait être quelque chose comme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="conteneur-annonce">
  <div class="annonce">
    <p class="title">Titre objet</p>
    <p class="surface"><span class="label">Surface</span><span class="valeur">10</span></p>
    <p class="price"><span class="label">Prix</span><span class="valeur">20</span></p>
  </div>
  <!-- d'autres annonces -->
  <div class="annonce">
    <p class="title">Titre objet</p>
    <p class="surface"><span class="label">Surface</span><span class="valeur">21</span></p>
    <p class="price"><span class="label">Prix</span><span class="valeur">10.5</span></p>
  </div>
</div>

Premier constat, toutes tes annonces sont dans un même conteneur.

Outre le fait que cela deviendra facile de mettre en forme via le CSS, le code présente une certaine « cohérence » concernant les champs « valeur de tri », en l’occurrence les champs <span class="valeur"> unique par ligne.

Les unités, concernant les valeurs, peuvent éventuellement être ajoutées en CSS avec un pseudo-élément ::after si non intégré directement dans le code.

Chaque ligne, les <p>, possède sa propre classe, unique dans l'annonce, qui représente le critère de recherche des éléments pour le tri.

Avec une telle structure, il est plus facile de créer une fonction générique de tri sur base d'un signature : function triDonnees( className, sens).

Cette fonction, à peine différente de celle déjà donnée, pourrait ressembler à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function triDonnees( className, sens) {
  // récup. des éléments à trier
  const elements = document.querySelectorAll(".annonce");
  const datas = [];
  elements.forEach((el) => {
    // récup. élément contenant la valeur
    const elValue = el.querySelector( `.${className} .valeur`);
    // récup. la valeur du champ pour tri avec parseFloat
    const value = parseFloat(elValue.textContent);
    // on stcke l'élément conteneur et la valeur pour le tri
    datas.push([el, value]);
  });
  // tri suivant la valeur ordre croissant
  if( sens > 0 ){
    datas.sort((a,b) => {
      return a[1] - b[1];
    })
  }
  else {
    datas.sort((a,b) => {
      return b[1] - a[1];
    })
  }
  // reinjection des éléments dans le nouvel ordre
  const elemParent = elements[0].parentNode;
  datas.forEach((el) => {
    elemParent.appendChild(el[0]);
  });
}

Le paramètre sens est utilisé comme suit
• sens > 0, par exemple 1, entraine un tri croissant
• dans le cas contraire, par exemple -1, entraine un tri décroissant

Voilà déjà pour partir sur de bonnes bases.

Maintenant :

Comment faudrait-il faire pour lier le code à un select de type:

Déjà ton code est incorrect, une ID doit être UNIQUE, de plus qu'est-ce que tu entends par « Default », faut-il garder une trace de l'ordre original ?

Pourquoi mettre deux <select> où un pourrait suffire il me semble, mais cela n'est pas grave !

Pour le principe, sur le onchange de tes <select> tu appelles la fonction de tri.

C'est un classique en JavaScript, qu'est-ce que tu ne saisies pas ?

**mouls22** · 30/01/2022, 12h56

J'ai fait ce que tu as dit en rendant le code plus rigoureux et en plaçant toutes les annonces dans un même conteneur-annonce et un seul select avec onchange="trier():

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="conteneur-annonce">
 
<div class="tri">
				<span>trier</span>
				<select name="" onchange="trier()" id="prix-superficie">
					<option value="Default">Default</option>
					<option value="PriceLowToHigh">Prix du plus bas au plus haut</option>
					<option value="PriceHighToLow">Prix du plus haut au plus bas</option>
          <option value="SuperficieLowToHigh">Superficie du plus bas au plus haut</option>
					<option value="SuperficieHighToLow">Superficie du plus haut au plus bas</option>
 
				</select>
			</div>
 
 
        <div class="container"> 
<div class="slider" >
<img class ="active" style="width:240px; height:170px;" src="/picture0.jpg">
</div>
<div class= "informations">
<a class="maquette" href="/principales/single.php?id=32"  >
 <p class='title'>Titre1</p>
<p class='price'><span class='mru'>Prix :</span><span class='valeur'> 210</span></p>
<p class='superficie'> <i class='fas fa-chart-area'></i> <span class='valeur'>250</span>  m2</p><
p class='date'> <i class='fa fa-calendar'></i> 2022-01-28</p>
<p class='city'> <i class='fa fa-map-marker' style='font-size:15px'></i>VilleA</p>
</a>
</div>
</div>
 
        <div class="container"> 
<div class="slider" >
<img class ="active" style="width:240px; height:170px;" src="/pictures.jpg">
</div>
<div class= "informations">
<a class="maquette" href="/principales/single.php?id=32"  >
 <p class='title'>Titre2</p>
<p class='price'><span class='mru'>Prix :</span><span class='valeur'> 21</span></p>
<p class='superficie'> <i class='fas fa-chart-area'></i> <span class='valeur'>200</span>  m2</p><
p class='date'> <i class='fa fa-calendar'></i> 2022-01-28</p>
<p class='city'> <i class='fa fa-map-marker' style='font-size:15px'></i>VilleB</p>
</a>
</div>
</div>
 
</div>

Du coté javascript, on m'affiche en console que la fonction trier() n'est pas défini:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function triDonnees( className, sens) {
  // récup. des éléments à trier
  const elements = document.querySelectorAll(".conteneur-annonce");
  const datas = [];
  elements.forEach((el) => {
    // récup. élément contenant la valeur
    const elValue = el.querySelector( `.${className} .valeur`);
    // récup. la valeur du champ pour tri avec parseFloat
    const value = parseFloat(elValue.textContent);
    // on stcke l'élément conteneur et la valeur pour le tri
    datas.push([el, value]);
  });
  // tri suivant la valeur ordre croissant
  if( sens > 0 ){
    datas.sort((a,b) => {
      return a[1] - b[1];
    })
  }
  else {
    datas.sort((a,b) => {
      return b[1] - a[1];
    })
  }
  // reinjection des éléments dans le nouvel ordre
  const elemParent = elements[0].parentNode;
  datas.forEach((el) => {
    elemParent.appendChild(el[0]);
  });
 
}
 
 
 
function trier(){
 
var tri= document.getElementById("prix-superficie");
 
if(tri.value=="PriceLowToHigh"){
  triDonnees( price, b[1] - a[1]);
 
}
 
else if(tri.value=="PriceHighToLow"){
  triDonnees( price, a[1] - b[1];);
 
}
 
else if(tri.value=="SuperficieHighToLow"){
  triDonnees( superficie, a[1] - b[1];);
 
}
 
else if(tri.value=="SuperficieLowToHigh"){
  triDonnees( superficie, b[1] - a[1]);
 
}

<<de plus qu'est-ce que tu entends par « Default », faut-il garder une trace de l'ordre original ?>>
-> Oui, je pensais à ça

**NoSmoking** · 30/01/2022, 16h08

Tu y es presque !

Ton <select> doit contenir les paramètres de tri à passer à la fonction triDonnees

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<select onchange="trier(this.value)">
  <option value="">Default
  <option value="price|1">Prix croissants
  <option value="price|-1">Prix décroissants
  <option value="surface|1">Surface croissantes
  <option value="surface|-1">Surface décroissantes
</select>

Les paramètres sont séparé par un | qui va permettre de récupérer la classe et le sens.

La fonction trier va faire le tampon entre le <select> et la fonction triDonnees.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// garde l'ordre de départ
const originalList = document.querySelectorAll(".annonce");
 
function trier(value) {
  // récup. class et sens
  const param = value.split("|");
  if (value) {
    triDonnees(param[0], param[1])
  }
  else {
    // restaure l'ordre initial
    const elemParent = originalList[0].parentNode;
    originalList.forEach((el) => {
      elemParent.appendChild(el);
    });
  }
}

L'ensemble serait factorisable mais chaque « chose vaut sa peine ».

Là logiquement tu as tout pour que cela tourne, cela sera surement à aménager suivant l'évolution que tu veux en faire.

Trier des annonces par prix

JavaScript

Vue hybride

Discussions similaires

Partager

Partager