MST-NETSOLUTIONS SEO BLOG

Teil 5: Weitere Funktionen

Filter

Da nun die Grundfunktionen stehen, können wir uns an zusätzliche Features machen. Eines davon wäre z.B. ein Filter nach der Kategorie.

Dafür erstellen wir zunächst ein Stück css-Code, den wir oben in den <style></style> Teil einfügen:

#kategorie_filter{
	background-color:#6BC500;border:0px solid #CFCFCF;color:white;padding:10px;padding-bottom:12px;padding-top:12px;text-align:left;font-size:18px;font-weight:bold;
}

Dann müssen wir den Teil der Tabellenüberschrift ändern, der die Kategorie zeigt. Also aus

<th>Eintrag</th>

wird

<th>
  <select id="kategorie_filter" name="kategorie_filter" onchange="location.href='einkaufsliste.php?action=filter&filter=this.value'">
   <option value="Alle">Alle</option>
   <option value="Lebensmittel">Lebensmittel</option>
   <option value="Auto">Auto</option>
   <option value="Drogerie">Drogerie</option>
   <option value="Freizeit">Freizeit</option>
   <option value="Gesundheit">Gesundheit</option>
   <option value="Sonstiges">Sonstiges</option>
  </select>
</th>

Damit haben wir im Tabellenheader eine Auswahlliste mit den entsprechenden Kategorien.

Es fehlt also nur noch die passende Filterfunktion. Dazu ändern wir folgenden Code

$abfrage = "SELECT * FROM $tabelle  ORDER BY checked asc,Kategorie asc";

Diesen mit folgenden Zeilen ersetzen:

if($_GET["action"]=="filter"){
  if($_GET["filter"]<>"Alle") 
    $abfrage = "SELECT * FROM $tabelle WHERE Kategorie='".$_GET["filter"]."' ORDER BY checked asc,Kategorie asc";  
  else
    $abfrage = "SELECT * FROM $tabelle  ORDER BY checked asc,Kategorie asc"; 
  echo "<script>document.getElementById('kategorie_filter').value='".$_GET["filter"]."'</script>";	  
}else{
  $abfrage = "SELECT * FROM $tabelle  ORDER BY checked asc,Kategorie asc"; 
}

Damit wird zunächst geprüft, ob überhaupt ein Filter gesetzt wurde und wenn ja, ob Alle oder eine bestimmte Kategorie ausgewählt wurde. Wenn nicht, wird dem Select kein Filter (WHERE) zugewiesen.

Anschließend soll natürlich die entsprechende Auswahl auch in der Tabellenüberschrift der Spalte zu sehen sein. Das passiert mit der Zeile

echo „document.getElementById(‚kategorie_filter‘).value='“.$_GET[„filter“].“‚“;

Hier fügen wir ein kleines Javascript ein, welches die Auswahl einträgt.