Bonjour,

Est-il possible de "filtrer" les données d'un tableau préalablement rempli par une requête SQL?

J'ajoute avant qu'on me le propose: sans utiliser la méthode ajax (j'ai testé, ça marche mais ça n'est pas ce que je veux)

L'idée serait de remplir du texte dans un input text, ce qui permettrait de filtrer dans le tableau uniquement ce qu'on a recherché.

ex: je tape "al" dans ma recherche et j'obtiens dans mon tableau uniquement les lignes où le script a trouvé "al" dans n'importe quelle colonne.

J'ai bien une piste avec la méthode filter() qui permet de créer un nouveau tableau suivant une recherche mais j'ai du mal à trouver comment ça fonctionne

Any idea?

-
Edité par BGr45 22 octobre 2021 à 16:52:45

Oui, il suffit de créer un itérable ( comme un array, par exemple ) à partir du tableau HTML.
Puis, à chaque nouveau caractère tapé dans l'input, itérer sur cet itérable, et retirer les index ne contenant pas ce qui est tapé dans l'input ( array.splice fait ça très bien ).

Ou, pour filter(), quelque chose qui ressemblerait à :

let typedFilter = document.getElementById('monInputFiltre'); //référence vers ton input

let itemsToFilter = document.getElementsByClassName('tableItems'); //array contenant des références vers les cases de ton tableau sur lesquels tu veux filtrer

let filteredItems = itemsToFilter.filter(item => item.innerHTML.indexOf(typedFilter) > -1 ); // créé un array contenant les références aux cases dont le contenu contient ce qui est tapé dans l'input.

Donc après, le tout est de savoir ce que tu veux faire. Tu peux par exemple changer la couleur de fond de ces cases en vert :

for(let item of filteredItems){
  item.style.backgroundColor = 'green';
}

Sinon, si tu veux n'afficher que les cellules qui contiennent ce qui est tapé dans l'input, tu peux plutôt créer un array contenant des références vers les cellules qui ne contiennent pas ce qui est tapé dans l'input, puis supprimer ces éléments de ton document :

let itemsToRemove = itemsToFilter.filter(item => item.innerHTML.indexOf(typedFilter) < 0 );

for(let item of itemsToRemove){
  item.parentElement.removeChild(item);
}
  

Bon, j'ai tapé ça à la volée sans trop vérifier, mais ça devrait pouvoir donner quelque chose. Si tu n'y arrive pas, il faudrait que tu me donne un minimum de ton HTML ( surtout le tableau à filtrer ) pour que je fasse mes essais.

@LucasWerquin, merci pour ces informations!

J'ai ce début de code pour créer mon tableau par SQL et un début de réflexion avec ton code:

</script>

	<div class="logo2">	
		<img src="note.png" alt="image2">
	</div>
	<p class="p1">Inventory</p>
	<p class="p2">Search:</p>
	<p class="p3">FULL INVENTORY</p>
	<p class="p4">SEARCH</p>
	<div class="line1"></div>
	<div class="line2"></div>
		<form method="GET" id="FormSearch">	<!--indispensable pour utiliser un formulaire*/-->
			<input autocomplete="on" id="TextSearch" class="TextSearch" type="text" name="TextSearch" placeholder="Name, CAS or Formula..." value="<?php if (isset($_GET['TextSearch'])){echo $_GET['TextSearch'];} ?>">
			<input class="ValidSearch" id="ValidSearch" type="submit" value="Valider" name="envoyer">
			<input class="AddNew" type="submit" value="Add New..." name="AddNew"/>
		</form>
		
		<br/>	
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		
		</section>
		<div class="section2">
		<div class="tableau" id="tableau">
			<!-------------partie tableau---------->
			<table id="mytable" class="mytable">
				<tbody >
					<tr>
			    	<th class="Name">Molecule Name </th>
						<th class="CAS">CAS Number</th>
						<th class="Formula">Formula</th>
						<th class="MW">MW</th>
						<th class="Room">Room</th>
						<th class="Location">Location</th>
						<th class="Purity">Purity/Concentration</th>
						<th class="Supplier">Supplier</th>
						<th class="Date">Creation Date</th>
						<th class="User">Current User</th>
						<th class="Id" style="display:none">Id</th>
					</tr>	
							
<?php

$reponse = $bdd->query('SELECT * FROM inventaire_actuel'); /*inventaire total*/

while ($donnees = $reponse->fetch()){
 ?>  	
   	  
		   	 <tr>
		   	 	    <td title="Name : <?php echo $donnees['name']; ?>"><?php echo $donnees['name']; ?></td>
		          <td title="CAS : <?php echo $donnees['CAS']; ?>"><?php echo $donnees['CAS']; ?></td>
		          <td title="Formula : <?php echo $donnees['formula']; ?>"><?php echo $donnees['formula']; ?></td>
		          <td title="Mass weight : <?php echo $donnees['MW']; ?> g/mol"><?php echo $donnees['MW']; ?></td>
		          <td title="Room : <?php echo $donnees['room']; ?>"><?php echo $donnees['room']; ?></td>
		          <td title="Location : <?php echo $donnees['details']; ?>"><?php echo $donnees['details']; ?></td>
		          <td title="Purity : <?php echo $donnees['purity']; ?>"><?php echo $donnees['purity']; ?></td>
		          <td title="Supplier : <?php echo $donnees['supplier']; ?>"><?php echo $donnees['supplier']; ?></td>
		          <td title="Creation date : <?php echo $donnees['reception']; ?>"><?php echo $donnees['reception']; ?></td>
		          <td title="User : <?php echo $donnees['user']; ?>"><?php echo $donnees['user']; ?></td>
		          <td style="display:none"><?php echo $donnees['id']; ?></td>
		      </tr>
     
<?php
               
	}

?>
		</tbody>
	</table>
</div>
</div>
<p class="infobottom">
			Showing ** from ** entries
<p>	

</body>
</html>


<script>

//fonction de recherche automatique et autocompletion dans le tableau
				
$('#FormSearch').keyup(function(){ //fonction qui se déclenche lors du relachement d'une touche du clavier
     		//document.getElementById('mytable').innerHTML = ""; //on supprime le contenu actuel de tableau
 				let typedFilter=document.getElementById('TextSearch'); //référence vers input
 				let itemsToFilter = document.getElementsByClassName("Names CAS Formula MW"); //array contenant des références vers les cases du tableau à filtrer
      	let itemsToRemove = itemsToFilter.filter(item => item.innerHTML.indexOf(typedFilter) < 0 );
 				for(let item of itemsToRemove){
 	 			item.parentElement.removeChild(item);
				}	
 				
      	console.table(item);
 				

})


</script>
<?php
$reponse->closeCursor();
?>

Ca me donne une erreur "Uncaught TypeError: itemsToFilter.filter is not a function" que je ne comprends pas.

-
Edité par BGr45 27 octobre 2021 à 10:29:02

J'ai fini par solutioner mon problème mais j'ai triché...

En fait, une fonction javascript toute prête existe; j'avoue très honnêtement que je n'aurais jamais pu la créer moi-même !!

J'ai trouvé ça ici: https://codepen.io/priyankamalviya/pen/zzWZEa

J'ai donc copié-collé ce code assez touffu et simplement rajouté dans mon input text:

<input class="TextSearch" type="text" data-table="mytable" placeholder="Name, CAS or Formula..." value="<?php if (isset($_GET['TextSearch'])){echo $_GET['TextSearch'];} ?>">

et j'ai ajouté l'Id de mon input:

var TableFilter = (function() {
 var Arr = Array.prototype;
		var input;
  
		function onInputEvent(e) {
			input = e.target;
			var table1 = document.getElementsByClassName(input.getAttribute('data-table'));
			Arr.forEach.call(table1, function(table) {
				Arr.forEach.call(table.tBodies, function(tbody) {
					Arr.forEach.call(tbody.rows, filter);
				});
			});
		}

		function filter(row) {
			var text = row.textContent.toLowerCase();
       console.log(text);
      var val = input.value.toLowerCase();
      console.log(val);
			row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
		}

		return {
			init: function() {
				var inputs = document.getElementsByClassName('TextSearch');
				Arr.forEach.call(inputs, function(input) {
					input.oninput = onInputEvent;
				});
			}
		};
 
	})();
  
 TableFilter.init(); 
})();

Ca marche très bien et c'est instantané (plus rapide que l'ajax)

Il y avait aussi l'option d'ajouter le plug-in jQuery "dataTables" mais je n'ai pas franchi le pas.

Ce qui m'ennuie maintenant c'est que j'avais bien créé au départ un enchaînement de lignes grises puis blanches (paires=grises/impaires=blanches) dans mon tableau via css mais ça n'est plus respecté puisqu'on fait juste 'disparaitre' les lignes qui ne nous intéressent pas... Du coup une ligne impaire peut se retrouver en dessous d'une autre ligne impaire à l'affichage et réciproquement avec les lignes paires.

Il faudrait modifier quelquechose dans le css via le script? ou bidouiller la fonction pour supprimer les lignes au lieu de les faire disparaitre??

Oulàlàlà, je la sens pas, là...

-
Edité par BGr45 27 octobre 2021 à 17:42:15