Filtre multiple n'affiche que les valeurs d'un seul choix [Résolu]

Signaler
-
Messages postés
7
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 janvier 2021
-
Bonjour, j'ai un tableau dont je souhaite filtrer les lignes selon différentes valeurs d'un seule colonne. J'ai fait une fonction pour un filtre multiple avec select2. Mon probléme est qu'elle n'affiche que les lignes qui correspondent à une seule valeur meme si j'ai mis quatre valeurs dans le filtre. Merci de m'aider à résoudre ce problème car je suis encore débutant.



 <script th:inline="javascript">

 /*<![CDATA[*/
  var faultDetails = /*[[${faultDetails}]]*/"";
 /*]]>*/


function FilterFunction(value, data){
  var filteredData = [];
  for(var i = 0; i < data.length; i++){
   value = value.toLowerCase();
   var facf_regcod_nospace = data[i].acf_regcod_nospace.toLowerCase();
   if(facf_regcod_nospace.includes(value)){
    filteredData.push(data[i]);}}
  return filteredData; 
 }
 function rebuildTable(data){
  var table = document.getElementById('detailsTable')
  table.innerHTML=''
  for(var i = 0; i <data.length; i++){
   var row = `<tr>
    <td>${data[i].acf_fleet}</td>
    <td>${data[i].acf_regcod_nospace}</td>
          <td>${data[i].fault_severity}</td>
   </tr>`
   table.innerHTML += row
  }}
 $(document).ready(function()
 {
 $('#txtSearch').select2({
  allowClear: true,
  tags:true,
  placeholder:'Select values ..',
  closeOnSelect:false
   });
 $('#txtSearch').on('change', function(){ 
 
  var value = $("#txtSearch option:selected").val();
  var data = FilterFunction(value, faultDetails);
  rebuildTable(data)
});

7 réponses

Messages postés
31032
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 janvier 2021
3 180
Bonjour,

Commence par mettre un peu de debug et regarde dans la console ce que ça donne

function FilterFunction(value, data){
  console.log("value",value,"data",data);
  var filteredData = [];
  for(var i = 0; i < data.length; i++){
    value = value.toLowerCase();
    var facf_regcod_nospace = data[i].acf_regcod_nospace.toLowerCase();
    console.log("facf_regcod_nospace",facf_regcod_nospace,"value",value);
    if(facf_regcod_nospace.includes(value)){
      console.log("On rentre dans le if, on ajoute  :",data[i]);
      filteredData.push(data[i]);
    }else{
      console.log(" ELSE .. on n'ajoute pas la valeur :",data[i]);
    }
  }
  return filteredData; 
 }

merci @jordane45 pour votre réponse. J'ai remarqué que dans la boucle qu'il prend toujours une seule valeur depuis les valeurs choisis dans le search txt.
Messages postés
31032
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 janvier 2021
3 180
Faudrait que tu nous montre ton code complet et que tu as dit qu' aux a trouvé ton plugin select2
Messages postés
7
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 janvier 2021

Messages postés
7
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 janvier 2021

Voici un exemple, sachant que ici j'ai mis dans le search txt les deux premieres valeurs: f-gznu et f-hrbi
Messages postés
7
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 janvier 2021

@jordane45 voici le reste de mon code
<!-- /.col -->
<div class="col-md-6">
<div class="form-group">
<label>Multiple</label> <select id="txtSearch" name="keyword[NL][]" class="select2" multiple="multiple"
  data-placeholder="Select one or different values for AC" style="width: 100%;">
<option th:each="detail : ${faultDetails}" th:value="${detail.acf_regcod_nospace}" th:text="${detail.acf_regcod_nospace}"></option>
</select>
          
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="card">
<div class="card-header">
<h3 class="card-title">Open Fault Details</h3>
</div>
<div class="card-body" style="width: 98%; min-height: 400px; height: 400px; overflow: auto;">

<table id="detailsTable" class="table table-bordered table-hover">
<thead>
<tr class="table-info">
<th>FLEET</th>
<th>AC</th>
<th>SEVERITY</th>
<th>FAULT DEFERRALCLASS</th>
<th>FAULT DEFERRALREF</th>
<th>STATUS</th>
<th>DUE EXT</th>
<th>DUE</th>
<th>FOUND DATE</th>
<th>PARENT EVENT ID</th>
<th>PARENT EVENT</th>
</tr>
</thead>
<tbody>
<tr th:each="detail : ${faultDetails}">
<td th:text="${detail.acf_fleet}">ACF FLEET</td>
<td th:text="${detail.acf_regcod_nospace}">ACF_REGCOD_NOSPACE</td>
<td th:text="${detail.fault_severity}">FAULT SEVERITY</td>
<td th:text="${detail.fault_deferralclass}">FAULT DEFERRALCLASS</td>
<td th:text="${detail.fault_deferralref}">FAULT DEFERRALREF</td>
<td th:text="${detail.workscope_status}">STATUS</td>
<td th:text="${detail.due_date_extend}">DUE_EXT</td>
<td th:text="${detail.due_date}">DUE</td>
<td th:text="${detail.fault_foundondate}">FOUND DATE</td>
<td th:text="${detail.parent_event_id}">PARENT EVENT ID</td>
<td th:text="${detail.parent_event}">PARENT EVENT</td>
</tr>
</tbody>
</table>
</div>
</div>



EDIT: Correction des balises de code. Ajout du LANGAGE
Messages postés
31032
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 janvier 2021
3 180
Je t'ai demandé où tu avais trouvé le plugin select2
  • Je suppose que c'est celui là

https://select2.org/

Et donc, tu n'as pas bien dû regarder la documentation....
Ta façon de récupérer les valeurs sélectionnées
var value = $("#txtSearch option:selected").val();

n'est pas celle de la doc
https://select2.org/programmatic-control/retrieving-selections
Messages postés
7
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 janvier 2021

@jordane45 comment je peux rendre ça compatible avec mon code, parce que d'aprés ce que j'ai fait ça marche pas encore.
Messages postés
7
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 janvier 2021

j'ai remplacé ces lignes


$('#txtSearch').select2({
allowClear: true,
tags:true,
placeholder:'Select values ..',
closeOnSelect:false
});




par cette ligne


$('#txtSearch').select2('data');



Mais toujours n'affiche que les lignes qui correspondent à une seule valeur séléctionnée
Messages postés
31032
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 janvier 2021
3 180
Tu fais n'importe quoi .....

Et puis.. une bonne foi pour toutes... pourrais tu utiliser correctement les BALISES DE CODE ( en y précisant le LANGAGE afin d'avoir la coloration syntaxique ?? )
Explications à lire ENTIEREMENT disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Bref,
le code

$('#txtSearch').select2({
  allowClear: true,
  tags:true,
  placeholder:'Select values ..',
  closeOnSelect:false
   });


Sert à initialiser le plugin.... il faut donc qu'il soit présent pour que ton select devienne un select2

Ensuite, dans la doc, il y a le code à utiliser pour RECUPERER les éléments selectionnés....
Si je t'ai indiqué la ligne de code qui n'était pas bonne chez toi, c'était pour que tu la remplaces par le bon code... pas que tu changes du code au pif n'importe où !

Donc.. LA LIGNE à modifier dans ton code c'est celle la:
var value = $("#txtSearch option:selected").val();


A remplacer, très certainement, par :
var value  =$('#txtSearch').select2('data');

Attention.. ici value contiendra LES éléments selectionnés... pas juste leur valeur... (ça te retourne un array avec tous les éléments choisis )
Donc, dans la suite de ton code, tu devras récupérer la valeur de chaque élément...(via une boucle )
Les console.log que je t'ai donné devraient te donner une idée de comment faire...
Messages postés
7
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 janvier 2021
>
Messages postés
31032
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 janvier 2021

@jordane 45 , j'ai fait comme ça mais toujours le même résultat, je comprends pas vraiment la source du problème.
	$('#txtSearch').on('change', function(){	
	
		var value  =$('#txtSearch').select2('data');
		console.log("aa", value);
		console.log("v", value.length);
		for(var i =0; i<value.length; i++){
		var v = value[i].text;
		console.log(v);	
		
		var data = FilterFunction(v, faultDetails);
		rebuildTable(data)

		}

});


Messages postés
31032
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 janvier 2021
3 180 >
Messages postés
7
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 janvier 2021

Il faut que ta boucle soit dans la fonction rebuildTable
sinon tu l'appelles pour chaque valeur et donc par conséquent tu ne gardes que la dernière de la liste
Messages postés
7
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 janvier 2021

C bon, ça marche maintenant. Je partage le code pour tous qui ont besoin:

<script th:inline="javascript">

	/*<![CDATA[*/
		var faultDetails = /*[[${faultDetails}]]*/"";
	/*]]>*/
	
	function FilterFunction(value, data){
	  console.log("value",value,"data",data);
		var filteredData = [];
		
		for(var j =0; j<value.length; j++){
		var v = value[j].text;
		var vi= v.toLowerCase();
		console.log(v);	
		for(var i = 0; i < data.length; i++){
			var facf_regcod_nospace = data[i].acf_regcod_nospace.toLowerCase();
			console.log("facf_regcod_nospace",facf_regcod_nospace,"value",value);
			if(facf_regcod_nospace.includes(vi)){
			console.log("On rentre dans le if, on ajoute  :",data[i]);
			filteredData.push(data[i]);
			}else{
     		 console.log(" ELSE .. on n'ajoute pas la valeur :",data[i]);
   			 }}}
		return filteredData;	
	}
	function rebuildTable(data){
		var table = document.getElementById('detailsTable')
		table.innerHTML=''
		
		for(var i = 0; i <data.length; i++){
			var row = `<tr>
				<td>${data[i].acf_fleet}</td>
				<td>${data[i].acf_regcod_nospace}</td>
		        <td>${data[i].fault_severity}</td>
			</tr>`
			table.innerHTML +=	row
		}}
	$(document).ready(function()
	{
	$('#txtSearch').select2({
		allowClear: true,
		tags:true,
		placeholder:'Select values ..',
		closeOnSelect:false
			});
	$('#txtSearch').on('change', function(){	
	
		var value  =$('#txtSearch').select2('data');
		var data = FilterFunction(value, faultDetails);
		rebuildTable(data)

		})
	});
</script>