Wie funktioniert sowas? Vergleichstabelle ?

Erstmal brauchst du für das Setzen der Filter 'Conditional Logic' (edit: nicht unbedingt, aber es ist ein gutes Stichwort). Man könnte zwar die Tabelle vorhalten und dann alles ausblenden, was nicht zu den Filtern paßt, aber das wäre in meinen Augen wenig sinnvoll und nicht performant. Also greift man aus der 'Tabelle' bzw. Datenbank alle Einträge raus, die zu den Filtern passen und zeigt diese dynamisch an. Keine Ahnung ob es gerade für diesen Zweck ein fertiges Plugin gibt.

 

Du kannst so etwas mit WordPress im Rahmen eines Custom Post Types realisieren. Der bedient sich den gleichen Eigenschaften (Taxonomie) wie ein normaler Beitrag und wird ggf. um eigene Taxonomien erweitert. Das, was Du als "Kategorie" in WordPress kennst, lässt sich für so ziemlich alles missbrauchen. Auf diese Weise hast Du dann die Möglichkeit, alle benötigten Eigenschaften eines "Posts" zu definieren. Der Vorteil einer "Kategorie" ist dabei, dass man sie immer wieder verwenden kann (im Vergleich zu benutzerdefinierten Feldern).

Die technische Umsetzung im Frontend kann auf unterschiedliche Weisen erfolgen.

In der von Dir verlinkten Seite reicht ein kurzer Blick in den Quelltext, um zu erkennen, dass hier mit jQuery gearbeitet wird (also reine JavaScript-Lösung). Dazu bekommen die Tabellenzeilen (tr) die Filter-Daten als Attribute:

Code:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Das kleine JavaScript findest Du irgendwo nach den unsäglichen Inline-Styles - die Logik ist recht einfach gehalten und funktioniert nach dem Ausschlussprinzip. Wenn ein Filter ausgewählt wird, werden die Elemente ausgeblendet, dessen data-Attribut nicht erfüllt.

Fertig.

PS: Praktisch könntest Du die Tabelle als reinen HTML-Code in eine Seite einpflegen mitsamt dem JavaScript - aber solche Dirty-Lösungen mag ich nicht.

 

Hey super Antwort.

Benutze das Taxonomie-Plugin schon für einige Webseiten. Damit köntne man solch eine Tabelle mit etwas Aufwand realisieren. Man müsste dann die CSS-Datei die die Posts darstellt anpassen, damit diese als "Tabelle" angeigt werden.

Danke für den Tipp

 

Weil Du es programmierst. Logik halt... Den Rest habe ich oben erklärt.

Man kann nahezu jedem beliebigen HTML-Element ein data-Attribut vergeben. Diese lassen sich mittels jQuery einfach und komfortabel auslesen und verarbeiten.

Das Skript aus Deinem Beispiel überprüft das Auswählen einer Checkbox im Formular und vergleicht den assoziierten Wert (1) mit dem Wert aus dem data-Attribut. Trifft dies zu, wird eine CSS-Klasse an das Element (in dem Fall eine Tabellenzeile (<tr>) angehängt. Trifft es nicht zu, wird die Klasse entfernt. Auf diese Weise werden die Einträge dann angezeigt oder eben nicht.

Kann man bei so kleineren Listen machen. Wenn sie umfangreicher werden, sollte man die Unmengen an Informationen nicht alle auf einmal laden. Dann kommst der asynchrone Datenabgleich zum Tragen (AJAX) und nur die relevanten Daten werden aus der Datenbank (oder einer anderen Datenquelle) geladen. Sowas findet sich dann bei modernen Vergleichsportalen...