Creare un filtro in base alle checkbox selezionate

[carlo9987]

Ciao a tutti! Ho bisogno subito del vostro aiuto!! :dipser:

Ho una pagina PHP che mi restituisce in una tabella il risultato di una query. Questa tabella è di 5 colonne e la genero con il seguente codice:

$query = mssql_query("Select * from tabella");
				
while($row = mssql_fetch_array($query)){
	echo "<tr><td>";
	echo $row['campo1'] . "</td><td>" . $row['campo2'] . "</td><td>" .  $row['campo3'] . "</td><td>" .  $row['campo4'] . "</td><td>" .  $row['campo5'] . ""; 
	echo "</td></tr>";
}

Quello che vorrei realizzare è una specie di filtro che funziona mediante la selezione di alcune checkbox, ovvero, ad inizio pagina vorrei inserire tutti i valori esistenti delle varie colonne ad esempio così:

echo "<fieldset>";
				
while($row2 = mssql_fetch_array($query_Campo1)){
       echo "<input type='checkbox' name='chkCampo1' value='" . $row["Campo1"] . "'> " . $row2['Campo1'] . "</option></br>";
}
				
echo "</fieldset>";

Ed in base alle checkbox deselezionate far sparire le righe dalla tabella.

E' possibile realizzare una cosa del genere?? Qualcuno potrebbe darmi qualche suggerimento??

Vi ringrazio in aticicpo!

 

[criric]

Ciao, guarda questo esempio

<script>
    function mostra(colonna,check) {      
        
        var td = document.getElementById(colonna);
        if(check === false)
            td.style.display = "none";
        else
            td.style.display = "block";
    }

</script>
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col1"/>Colonna 1
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col2"/>Colonna 2
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col3"/>Colonna 3
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col4"/>Colonna 4
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col5"/>Colonna 5
<br/><br/>
<table border="1">
    <tr>
        <td id="col1">valore 1</td>
        <td id="col2">valore 2</td>
        <td id="col3">valore 3</td>
        <td id="col4">valore 4</td>
        <td id="col5">valore 5</td>
    </tr>
</table>

PS:
questa riga è sbagliata : apri un input e chiudi un option

echo "<input type='checkbox' name='chkCampo1' value='" . $row["Campo1"] . "'> " . $row2['Campo1'] . "</option></br>";

 

[carlo9987]

Ciao, guarda questo esempio

<script>
    function mostra(colonna,check) {      
        
        var td = document.getElementById(colonna);
        if(check === false)
            td.style.display = "none";
        else
            td.style.display = "block";
    }

</script>
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col1"/>Colonna 1
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col2"/>Colonna 2
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col3"/>Colonna 3
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col4"/>Colonna 4
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col5"/>Colonna 5
<br/><br/>
<table border="1">
    <tr>
        <td id="col1">valore 1</td>
        <td id="col2">valore 2</td>
        <td id="col3">valore 3</td>
        <td id="col4">valore 4</td>
        <td id="col5">valore 5</td>
    </tr>
</table>

PS:
questa riga è sbagliata : apri un input e chiudi un option

echo "<input type='checkbox' name='chkCampo1' value='" . $row["Campo1"] . "'> " . $row2['Campo1'] . "</option></br>";

Prima di tutto ti ringrazio per la risposta! Prima di provare la soluzione da te postata però avrei bisogno di alcune delucidazioni, in quanto se inserisco delle parti di codice javascript sembrerebbe non funzionare!!

Questa è la prima parte di codice, dove dovrei inserirlo?? Scusami la domanda ma parto proprio dalle basi!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TITLE</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
	<script>
			
		$(function() {
			$( "#startDate" ).datepicker({
				dateFormat: 'dd-mm-yy'
			});
			$( "#endDate" ).datepicker({
				dateFormat: 'dd-mm-yy' 
			});			
		});				
	</SCRIPT>
	
</head>

<body bgcolor="#DDDDDD">

....

 

[criric]

la funzione la metti tra i tag script e /script insieme a quella di jquery

<script>			
    $(document).ready(function() {
        $( "#startDate" ).datepicker({
            dateFormat: 'dd-mm-yy'
        });
        $( "#endDate" ).datepicker({
            dateFormat: 'dd-mm-yy' 
			
        });			
    });
    function mostra(colonna,check) {      
        
        var td = document.getElementById(colonna);
        if(check === false)
            td.style.display = "none";
        else
            td.style.display = "block";
    }
</script>

 

[carlo9987]

Perdonami ma parto proprio da 0!! Utilizzando il mio caso reale:

CHECKBOX

echo "<fieldset style='font-family: Tahoma' id='fieldTipo'>";
				
while($row2 = mssql_fetch_array($query_Tipo)){
	echo "<input type='checkbox' name='chkTipo' value='" . $row["Tipo"] . "'>" . $row2['Tipo'] . "</br>";
}
		
echo "</fieldset>";

Quindi ad esempio:

[X] auto
[ ] scooter


TABELLA

TIPO | PROVINCIA
----------------------------
auto | RM
scooter | BO <------ Nascondere
auto | CT
scooter | BA <------ Nascondere

while($row = mssql_fetch_array($query)){
        echo "<tr style='font-family: Tahoma'>";
	echo "<td>" . $row['Tipo'] . "</td><td>" . $row['Provincia'] . "</td>"; 
        echo "</tr>";
}

Come andrebbe generato il codice?? Ho preferito dettagliare di più perchè altrimenti mi perdo

Grazie mille in anticipo!!

 

[criric]

mi avevi parlato di colonne non di righe
cmq meglio fare una query per le check e una per i risultati
visto che includi gia jquery conviene sfruttarlo
testato in locale su FF e funzionante

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
    $(document).ready(function(){
        $("input:checkbox").change(function(){            
            if($(this).is(':checked')) {
                $("." + $(this).val()).show();
            } else {
                $("." + $(this).val()).hide();
            }
        })
    })
    
</script>
<?php
include 'test/connessione.php';

$query = mysqli_query($conn, "select Tipo from tabela GROUP BY Tipo");
echo "<fieldset>";
while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
    echo "<input checked type='checkbox' name='ck' value='" . $row['Tipo'] . "'> " . $row['Tipo'] . "</option>";
}
echo "</fieldset>";

$query = mysqli_query($conn, "select * from tabela");
echo "<table>";
while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
    echo "<tr class='" . $row['Tipo'] . "'>";
    echo "<td>" . $row['Tipo'] . "</td>";
    echo "<td>" . $row['Provincia'] . "</td>";
    echo "</tr>";
}
echo "</table>";
?>

dovrai adattarlo al tuo database
non ho commentato se non capisci qualcosa chiedi pure

 

[carlo9987]

mi avevi parlato di colonne non di righe
cmq meglio fare una query per le check e una per i risultati
visto che includi gia jquery conviene sfruttarlo
testato in locale su FF e funzionante

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
    $(document).ready(function(){
        $("input:checkbox").change(function(){            
            if($(this).is(':checked')) {
                $("." + $(this).val()).show();
            } else {
                $("." + $(this).val()).hide();
            }
        })
    })
    
</script>
<?php
include 'test/connessione.php';

$query = mysqli_query($conn, "select Tipo from tabela GROUP BY Tipo");
echo "<fieldset>";
while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
    echo "<input checked type='checkbox' name='ck' value='" . $row['Tipo'] . "'> " . $row['Tipo'] . "</option>";
}
echo "</fieldset>";

$query = mysqli_query($conn, "select * from tabela");
echo "<table>";
while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
    echo "<tr class='" . $row['Tipo'] . "'>";
    echo "<td>" . $row['Tipo'] . "</td>";
    echo "<td>" . $row['Provincia'] . "</td>";
    echo "</tr>";
}
echo "</table>";
?>

dovrai adattarlo al tuo database
non ho commentato se non capisci qualcosa chiedi pure

Ciao, ti ringrazio davvero per la disponibilità!!

Ho provato a riadattare la soluzione che hai postato tu, ma nulla...

 

[carlo9987]

Ti aggiungo l'errore che mi riporta chrome:

Uncaught Error: Syntax error, unrecognized expression: .

Effettivamente quello che volevo chiederti è proprio il significato di questa parte di codice:

$("." + $(this).val()).show();

Con "." cosa stiamo indicando??

Grazie mille!

 

[criric]

Con "." cosa stiamo indicando??

con il . si indica la classe
quindi ci riferiamo a tutte le tr che hanno il nome dellla classe uguale al valore della checkbox cliccata

per l'errore non l'ho mai visto...

 

[carlo9987]

con il . si indica la classe
quindi ci riferiamo a tutte le tr che hanno il nome dellla classe uguale al valore della checkbox cliccata

per l'errore non l'ho mai visto...

Ok, l'errore non c'è più, avevo sbagliato io una cosa.... però non funziona ancora. Ti faccio vedere come l'ho riadattato:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>-----</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<script>
		
	$(document).ready(function(){ 
       	       $("input:checkbox").change(function(){             
                     if($(this).is(':checked')){ 
              	           $("." + $(this).val()).show();  
      	             }else{ 
               	           $("." + $(this).val()).hide();  
                     } 
               }) 
    	})
		 	
</script>
	
</head>
<body>
$query_ISF = mssql_query("select distinct ISF from contatti where userId = 10");
				
echo "<fieldset style='font-family: Tahoma' id='fieldISF'>";
				
while($rowISF = mssql_fetch_array($query_ISF)){
	echo "<input checked type='checkbox' name='ck' value='" . $rowISF["ISF"] . "'>" . $rowISF['ISF'] . "</br>";
}
				
echo "</fieldset>";

$query = mssql_query("select ISF, Provincia from contatti where userId = 10 GROUP BY ISF, Provincia");
				
while($rowResult = mssql_fetch_array($query)){
	echo "<tr class='" . $rowResult['ISF'] . "' style='font-family: Tahoma'>";
	echo "<td>" . $rowResult['ISF'] . "</td><td>" . $rowResult['Provincia'] . "</td>"; 
        echo "</tr>";
}

</body>

 

[criric]

hai dimenticato i tag php nel body <?php e ?>
per il resto mi sembra a posto Cosa non funziona? al massimo metti degli alert() nella funzione javascript per vedere se e dove si blocca

$(document).ready(function(){ 
            alert("caricamento pagina");
            $("input:checkbox").change(function(){  
                alert("cliccato");
                if($(this).is(':checked')){ 
                    $("." + $(this).val()).show();  
                    alert("selezionato");
                }else{ 
                    $("." + $(this).val()).hide();  
                    alert("deselezionato");
                } 
            }) 
        })

 

[carlo9987]

Si si i tag del php ci sono, li ho saltati copiando ed incollando. Comunque gli alert compaiono in maniera corretta, però le occorrenze in tabella rimangono dove sono.. :dipser:

 

[carlo9987]

Allora, finalmente sono riuscito a risolvere!! Condivido il codice, magari può essere di aiuto per qualcuno:

$(document).ready(function(){ 
      $("input:checkbox").change(function(){  
          if($(this).is(':checked')){
		var value = $(this).val();
		value = value.replace(" ", ".");
                ($("tr." + value)).show(); 
          }else{ 
	        var value = $(this).val();
		value = value.replace(" ", ".");
                ($("tr." + value)).hide(); 
          } 
     }) 
})

In pratica il problema era che l'elemento da nascondere andava passato nel seguente modo:

tr.NOME.COGNOME

Quindi ho fatto una replace dello spazio con un punto ed ho concatenato il tr..

Criric grazie mille per la disponibilità! :fonzie: :byebye:

 

[carlo9987]

Ciao a tutti!!

Ho la necessità di riprendere la discussione in quanto mi sono accorto di un problema. Con il codice da me utilizzato, quando andiamo a deselezionare e riselezionare una checkbox, automaticamente mi rende visibili gli elementi nascosti dalla deselezione delle checkbox presenti negli altri frame.

Ad esempio se dovessi filtrare per nome (quindi dal frame con le checkbox dei nomi), e poi andare a filtrare per provincia (quindi dal frame con le checkbox delle provincie), ad la riselezione della provincia appena esclusa comporta la ricomparsa di tutte le occorrenze precedentemente nascoste dalla deselezione del nome.

Anche se contorto spero di aver reso l'idea

Ricapitolando, questo è il codice jquery attualmente utilizzato:

$(document).ready(function(){ 	
	$("input:checkbox").change(function(){  
		if($(this).is(':checked')){
			var value = $(this).val();
			value = value.split('.').join('');
			value = value.split(' ').join('');
			($("tr." + value)).show();		
		}else{ 					
			var value = $(this).val();
			value = value.split('.').join('');
			value = value.split(' ').join('');
			($("tr." + value)).hide();
		}
	})
});

Questo è il codice utilizzato per la creazione delle checkbox:

echo "<td style='width:33%;height:150px'><div style='overflow:scroll; width:100%; height:100%'>";
echo "<fieldset style='font-family: Tahoma' id='fieldISF'>";
				
sort($arrayNomi);
				
foreach(array_unique($arrayNomi) as $nomi){
	echo "<input checked type='checkbox' name='ck' id='chkNomi' value='" . str_replace(" ","",$nomi) . "'>" . $nomi . "</br>";
}
echo "</fieldset>";
				
echo "</div></td>";
	
#-------------------------QUERY estrazione Province			
echo "<td style='width:12%;height:150px'><div style='overflow:scroll; width:100%; height:100%'>";
				
sort($arrayProvince);
				
echo "<fieldset style='font-family: Tahoma' id='fieldProvince'>";	

foreach(array_unique($arrayProvince) as $province){
	echo "<input checked type='checkbox' name='ck' id='chkProvince' value='" . str_replace(NULL,"N.D.",$province) . "'> " . str_replace(NULL,"N.D.",$province) . "</br>";
}
echo "</fieldset>";
				
echo "</div></td>";

Questo invece è quello delle tr:

echo "<tr class='" . str_replace(" ","",$nomeOld) . " " . $provinciaOld . " " . str_replace(".","",$categoriaOld) . " " . str_replace(" ","",str_replace(".","",$ambOld)) . " " . str_replace(".","",$specOld) . "' style='font-family: Tahoma'>";

...

echo "</tr>";

Vi ringrazio in anticipo!!

Carlo

 

[carlo9987]

Qualcuno può aiutarmi??? :dipser:

Ciao a tutti!!

Ho la necessità di riprendere la discussione in quanto mi sono accorto di un problema. Con il codice da me utilizzato, quando andiamo a deselezionare e riselezionare una checkbox, automaticamente mi rende visibili gli elementi nascosti dalla deselezione delle checkbox presenti negli altri frame.

Ad esempio se dovessi filtrare per nome (quindi dal frame con le checkbox dei nomi), e poi andare a filtrare per provincia (quindi dal frame con le checkbox delle provincie), ad la riselezione della provincia appena esclusa comporta la ricomparsa di tutte le occorrenze precedentemente nascoste dalla deselezione del nome.

Anche se contorto spero di aver reso l'idea

Ricapitolando, questo è il codice jquery attualmente utilizzato:

$(document).ready(function(){ 	
	$("input:checkbox").change(function(){  
		if($(this).is(':checked')){
			var value = $(this).val();
			value = value.split('.').join('');
			value = value.split(' ').join('');
			($("tr." + value)).show();		
		}else{ 					
			var value = $(this).val();
			value = value.split('.').join('');
			value = value.split(' ').join('');
			($("tr." + value)).hide();
		}
	})
});

Questo è il codice utilizzato per la creazione delle checkbox:

echo "<td style='width:33%;height:150px'><div style='overflow:scroll; width:100%; height:100%'>";
echo "<fieldset style='font-family: Tahoma' id='fieldISF'>";
				
sort($arrayNomi);
				
foreach(array_unique($arrayNomi) as $nomi){
	echo "<input checked type='checkbox' name='ck' id='chkNomi' value='" . str_replace(" ","",$nomi) . "'>" . $nomi . "</br>";
}
echo "</fieldset>";
				
echo "</div></td>";
	
#-------------------------QUERY estrazione Province			
echo "<td style='width:12%;height:150px'><div style='overflow:scroll; width:100%; height:100%'>";
				
sort($arrayProvince);
				
echo "<fieldset style='font-family: Tahoma' id='fieldProvince'>";	

foreach(array_unique($arrayProvince) as $province){
	echo "<input checked type='checkbox' name='ck' id='chkProvince' value='" . str_replace(NULL,"N.D.",$province) . "'> " . str_replace(NULL,"N.D.",$province) . "</br>";
}
echo "</fieldset>";
				
echo "</div></td>";

Questo invece è quello delle tr:

echo "<tr class='" . str_replace(" ","",$nomeOld) . " " . $provinciaOld . " " . str_replace(".","",$categoriaOld) . " " . str_replace(" ","",str_replace(".","",$ambOld)) . " " . str_replace(".","",$specOld) . "' style='font-family: Tahoma'>";

...

echo "</tr>";

Vi ringrazio in anticipo!!

Carlo

 

[carlo9987]

Sono riuscito a risolvere, probabilmente non è una soluzione pulita ma funzionalmente fa il suo dovere!

Posto il codice, potrebbe tornare utile a qualcuno:

if($(this).is(':checked')){
	var value = $(this).val();
	value = value.split('.').join('');
	value = value.split(' ').join('');
	arrayShow.push(value);
	var index = arrayHide.indexOf(value);
	arrayHide.splice(index,1);					
}else{ 					
	var value = $(this).val();
	value = value.split('.').join('');
	value = value.split(' ').join('');
	arrayHide.push(value);
	var index = arrayShow.indexOf(value);
	arrayShow.splice(index,1);
}
$.each(arrayShow, function(key, valueShow) {
        ($("tr." + valueShow)).show();
});
$.each(arrayHide, function(key, valueHide) {
        ($("tr." + valueHide)).hide();
});

Ciao ciaoo :byebye: