Trier des annonces par prix

Version imprimable

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:

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>

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:

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 !

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

Code:

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>

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:

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>  <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:

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 :

Citation:

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 ?

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:

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:

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

Tu y es presque !

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

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:

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.

Le tri marche bien avec les prix, mais pas avec les surfaces.

Code:

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
<script>
         function triDonnees( className, sens) {
  // récup. des éléments à trier
  const elements = document.querySelectorAll(".container");
  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]);
  });
 
}
 
 
const originalList = document.querySelectorAll(".container");
 
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);
    });
  }
}

30/01/2022, 17h40
NoSmoking

Il faut que tu regardes plus avant ton code HTML pour vérifier la cohérence des classes ciblées avec les value misent dans le <select>.

Il est inutile de remettre le code si celui-ci ne change pas ;)
30/01/2022, 18h45
mouls22

Parfait! Tu avais raison, l'erreur était dans le code HTML. Je répéterai le code pour bien le maitriser. Grand merci à toi :)

Un peu plus direct ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table id="foo">
<tr>
  <td>551</td>
</tr>
<tr>
  <td>3</td>
</tr>
<tr>
  <td>5</td>
</tr>
<tr>
  <td>15</td>
</tr>
<tr>
  <td>51</td>
</tr>
<tr>
  <td>21</td>
</tr>
</table>

Code:

1
2
3
4
5
6
7
8
9
function customtablesort(a,b){
return ( parseFloat(a.querySelector('td').textContent) > parseFloat(b.querySelector('td').textContent)) ? 1 : -1;
 
}
 
lines = document.querySelectorAll('#foo tr');
elts=[...lines];
elts.sort(customtablesort);
elts.forEach(node=>document.querySelector('#foo').appendChild(node));

A adpater avec le class de la cellule qui contient le prix .. .querySelector('td')