[JS] Filtro Prodotti

[webmachine]

Ciao,
ho uno scirpt PHP che dal DB estrae dei prodotti con determinate caratteristiche...

Vorrei creare in JS una sorta di "Finalizza Risultato" in modo tale da permettere all'utente, tramite checkbox, di visualizzare solo gli elementi con determinate caratteristiche...
In sostanza l'utente deve poter filtrare il risultato in base a 3 criteri,
-Pubblicato
-Privato
-Ordinato

Di seguito vi lascio in HTML l'aspetto che ha il risultato di ogni record:

    <h2 id="h2_a">$nome_ar</h2>
    <p style="word-wrap: break-word;" id="p_a">$desc_ar</p>       
   
    <div id="action">
       
        <a href="regalo.php?r=$ID_r"><div id="share_a"><i id="ico_a"class="fa fa-gift fa-2x" aria-hidden="true"></i></div></a>
        <a target="_blank" href="$link_ar"><div id="lin_a"><i id="ico_a" class="fa fa-link fa-2x" aria-hidden="true"></i></div></a>
    </div>

Sapreste aiutarmi?

Grazie Mille,
A presto

 

[criric]

Ciao, non ti serve javascript : metti dei filtri direttamente nella query.

 

[webmachine]

Ciao, non ti serve javascript : metti dei filtri direttamente nella query.

No, io voglio che li mostri tutti e poi sia l'utente a scegliere, dopo, come filtrarli.
Come fa Amazon quando filtri i prodotti x taglia e/o colore...

 

[criric]

Amazon probabilmente utilizza ajax per inviare i filtri alla pagina che fa la query sul database.
Ls struttra è questa :

<form id="form_filtri">
    <input type="checkbox" name="filtro">
</form>
<div id="response"></div>
<script>
    $.post("pagina.php", $("#form_filtri").serialize(), function (response) {
        $("#response").html(response);
    });
</script>

tutto quello che la psgina.php stampa verrà visualizzato nel div response, i filtri vengono passati come secondo parametro.

EDIT
avevo dimenticato il richiamo

<form id="form_filtri">
    <input type="checkbox" name="filtro" onchange="mostraTabella()">

</form>
<div id="response"></div>
<script>
    function mostraTabella() {
        $.post("pagina.php", $("#form_filtri").serialize(), function (response) {
            $("#response").html(response);
        });
    }

</script>

 

[webmachine]

Ciao, scusa ma in questo modo devo cambiare/ricaricare pagina per poter visualizzare i filtri applicati...
Probabilmente mi sono spiegato male, quello che cerco io è semplicemente dare la possibilità all'utente di visualizzare "un po' per volta" i contenuti... ad esempio:

// MEX RESTITUITO

-rosso
-blu
-verde
-giallo
-rosa
-arancione

[ ] Ckbox Mostra solo Colori Primari:
-rosso
-blu
-giallo

Tutto questo senza ricaricare la pagina ma solamente modificato la proprietà display:none/block dei singoli div...

Secondo te è possibile? Se si come?

Grazie

 

[criric]

Il codice che ti ho postato non cambia pagina ne la ricarica : le chiamate ajax vengono effettuate in background e il risultato viene inserito in un div all'interno della pagina. Qui trovi l'esempio di quello che ti ho postato, se ci fai caso la pagina non si ricarica.
Quello che vuoi fare tu lo puoi ottenere con i metodi hide() e show() di jquery, quando crei la lista di prodotti dovrai assegnare una classe con il colore ad ogni riga quando spunti una checkbox richiami una funzione javascript tipo questa

function filtra() {
                $('input[type=checkbox]').each(function () {
                    if (this.checked) {
                        $("." + $(this).val()).show();
                    } else {
                        $("." + $(this).val()).hide();
                    }
                });
            }

ma non è un bel lavoro e se domani decidi di aggiungere un altro filtro devi riscrivere tutto.