Sujet Précédent Sujet Suivant

Systeme de filtre avec checkox

Fermé
matthh - 24 oct. 2022 à 16:27
 Pic-a-choux - 28 oct. 2022 à 12:14

Bonjour,

Etant début en javascript et n'ayant trouvé aucune solution qui marche dans mon cas, je me permet de vous demandez de l'aide.

Je cherche à creer un systeme de filtre en javascript via des checkbox.

J'ai donc plusieurs checkbox qui sont des extentions ("fr" , "com" , "net" etc...) et je cherchais à n'afficher que les .fr si on clique sur fr ou que les fr et com si on clique sur les deux.

 echo '<table id="mytable">';
      echo '<thead>';
      echo '<tr>';
      echo '<th></th>';
      echo '<th>Nom de domaine</th>';
      echo '<th>Raison sociale</th>';
      echo '</tr>';
      echo '</thead>';
      echo '<tbody id="test">';

      $listendd = "SELECT * FROM nomdedomaines LIMIT" ;
      $nddStatement = $bdd->prepare($listendd);
      $nddStatement->execute();
      $nomdedomaine = $nddStatement->fetchAll();

      // Boucle qui affiche le nom de l'entreprise et le nom de domaine de chaque client
      foreach ($nomdedomaine as $ndd)
      {
          echo '<tr>';
          echo '<td><form action="fichendd.php" method="POST"></td>';
          echo '<td> <label for="nomdedomaine" class="ndd">' . $ndd['ndd'] . '</label></td>';
          echo '<td> <label for="raison-sociale" class="rs">' . $ndd['raison_sociale'] . ' </label></td>';
          echo ' <td> <input type="submit" name="information" id="information" value="Plus d\'informations"></td> ';
          echo '<input type="hidden" name="nomdedomaine" value="' . $ndd['ndd'] . '" >';
          echo '<input type="hidden" name="raison-sociale" value="' . $ndd['raison_sociale'] . '" >';
          echo '<td></form></td>';
          echo '</tr>';

      }
      echo '</tbody>';
      echo '</table>';

Ci dessus mon tableau générer via ma base de données. 

Merci d'avance.
Windows / Chrome 106.0.0.0

A voir également:

1 réponse

Réponse 1 / 1
Pic-a-choux
28 oct. 2022 à 12:14

Salut,

simplement en triant les éléments par domaine et en supprimant ou mieux masquer ceux qui ne sont pas du domaine voulu lors de la validation du formulaire.

Une idée pratique serait de faire une collection ou 2 dans le JavaScript avec les domaines pour pouvoir générer le HTML qu'on veut quand on veut.

Par exemple avec une Map de ce genre:

let mapLiens = new Map();
mapLiens.set('fr',[/* la liste des liens en fr en tableau*/]);
mapLiens.set('com',[/* la liste des liens en com en tableau*/]);

/** il suffit de parcourir le tableau dans une boucle et de générer les élements à afficher en HTML avec document.createElement et .appendChild */

//-- ou dans deux Array différents si vous n'êtes pas à l'aise avec Object.Map

liensFR=[/* tableau de liens fr*/];
liensCOM=[/* tableau de lien com*/];

/** Pour générer les tableaux vous pouvez parcourir les éléments de la page qui contiennent les liens, il serait plus pratique de rajouter une class pour ces éléments en écrivant le HTML avec echo du PHP ou même des ID dynamique parce qua dans une boucle vous écrivez plusieurs fois la même ID et celle DOIT ÊTRE UNIQUE*/

let domaine=document.getElementsByTagName('nomdedomaine'),
    fr=[],
    com=[];
for(let i=0, len=domaine.length; i<len;i++){
  let tmp=domaine[i].value.substring(domaine[i].value.lastIndexOf('.'),domaine[i].value.length)
  if( tmp=='fr'){ fr.push(domaine[i].value) }
  if( tmp=='com'){com.push(domaine[i].value)}
}
//-- voilà déjà déjà deux listes triées pour .fr et .com
console.log('domaine en .fr ='+fr.toString()+'\r domaine en .com'+com.toString())
/* Il ne reste plus qu'à créer des élements à ajouter et supprimer les anciens contenus lors de la validation du formulaire ou d'un click sur la checkbox*/
/* /!\ A noter qu'il serait mieux de ne pas faire de tableaux pour ce genre de données ce qui permettrais de référencer correctement le contenu affiché, il suffit d'utiliser une bonne structure de données et faire un peu de CSS */

Au passage vous pouvez concaténer les echo plutôt que d'en faire plusieurs dans le début de table, ça sera plus rapide à lire et comprendre et vous l'avez fait dans le forEach.

Je n'ai pas tester le code mais si ce n'est pas ça ce n'est pas loin.
0

Discussions similaires

Erreur la zone de données passée à un appel système est insu
Vincent -
Panth33ra -

5 réponses
La fonction FILTRE n'est plus reconnue
Auri328 -
Auri328 -

3 réponses
l'administrateur système a configuré la polit
lc33520 -
@ -

40 réponses
comment contourner la fonction FILTRE
Gabby -
DjiDji59430 -

3 réponses