In Excel kennt man die Funktion schon lange, die Automatische Filterfunktion über Spalten.
Es entstehen DropDown Felder, bei deren Auswahl man nur die gefilterten Einträge der Tabelle sieht.

Im Web stellt sich diese Funktion etwas kommplizierter dar, aber dennoch ist sie möglich.

Wir benötigen dazu zunächst JQuery und dazu dass PlugIn uiTableFilter. Diese binden wir wie gewohnt über den Header in unsere Seite ein.

Anschließend erstellen wir eine Tabelle und füllen diese mit Daten, außerdem erstellen wir bereits die Dropdown Felder mit denen dann gefiltert werden soll. Die Felder müssen bereits mit den jeweiligen Werten belegt werden. Dies kann entweder aus einer Datenbank geschehen oder aber manuell, bei großen Datenmengen, die sowieso aus einer Datenbank kommen bietet es sich natürlich an auch die DropDown Felder dynamisch zu füllen, wobei man darauf achten sollte, dass jeder Datensatz nur einmal enthalten ist.

 
<table border="0" cellspacing="0" cellpadding="0" class="tabelle1">
<thead>
<tr>
<th>Ãœberschrift1</th>
<th>Ãœberschrift2</th>
</tr>
<tr>
<th>
<select id="spalte1">
<option value="">Alle anzeigen</option>
<option value="Datensatz1">Datenatz1</option>
<option value="Datensatz3">Datenatz3</option>
</select>
</th>
<th>
<select id="spalte2">
<option value="">Alle anzeigen</option>
<option value="Datensatz2">Datenatz2</option>
<option value="Datensatz4">Datenatz4</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Datensatz1</td>
<td>Datensatz2</td>
</tr>
<tr>
<td>Datensatz1</td>
<td>Datensatz2</td>
</tr>
<tr>
<td>Datensatz1</td>
<td>Datensatz2</td>
</tr>
<tr>
<td>Datensatz3</td>
<td>Datensatz4</td>
</tr>
</tbody>
</table>
 

Nun haben wir unsere Tabelle bereits korrekt aufgebaut und es fehlt die Filterfunktion, dazu benutzen wir das onchange ereignis des Select feldes in das wir unseren Filter einbauen.
Die beiden Selectfelder sehen dann wie folgt aus:

 
<select id="spalte1" onchange="$.uiTableFilter($('table.tabelle1'), $('select#spalte1 option:selected').val());">

...und...

 
<select id="spalte1" onchange="$.uiTableFilter($('table.tabelle1'), $('select#spalte2 option:selected').val());">

und damit haben wir bereits unseren filter angelegt.
Was passiert genau?
Die Funktion $.uiTableFilter() erwartet zwei Parameter. Der erste Parameter ist die Tabelle für die der Filter gelten soll. In unserem Fall also die Tabelle mit dem Klassennamen "tabelle1". Der zweite Parameter ist derWErt mit dem die Tabelle gefiltert werden soll. Hier kommt noch etwas mehr Javascript zu Tagem, da wir auf den derzeit ausgweählten Wert unseres DropDownFeldes zurgreifen müssen.
Wie man sieht habe ich beim erstellen der DropDownFelder ein option Feld mit keinem value besetzt und ihn mit "Alle anzeigen" benannt, damit wir wieder auf die Anfangsposition zurückkommen.

Was diese Funktion (noch) nicht kann ist die Verschachtelung von Parametern, d.h. es wird immer nur ein Filter angewendet.

Eine Demo befindet sich hier.

UPDATE 20.05.2009:

Die Funktion uiTableFilter bietet noch einen optionalen Parameter Column mit dem nur über eine bestimmt Spalte gesucht wird. Um diesen Parameter auch für unser Beispiel nutzen zu können muss allerdings eine kleine Änderung im PugIn selber vorgenommen werden.

In der Zeile:

 
jq.find("thead > tr:last > th").each( function(i){
if( $(this).text() == column ){
index = i;
 

muss nun

 
jq.find("thead > tr:first > th").each( function(i){
if( $(this).text() == column ){
index = i;
 

stehen, damit das PlugIn nur in der ersten Zeile unseres Headers sucht.

Nahezu jede große Website verzichtet nicht mehr darauf und bei über 98% der Internetnutzer ist es aktiviert. Die Rede ist von Javascript, oder um es in den Worten der Web-2.0-Blase zu sagen Ajax (Asynchronous JavaScript and XML). Wie bereits im Wort selber vorhanden geht es hier darum Inhalte von Websites asynchron nachzuladen, das heißt nur ein gewisser Teil einer Seite wird aktualisiert.

Doch in vielen Projekten wird von Anfang an keine Rücksicht darauf genommen später eventuell Inhalte mit Ajax nachzuladen. Die Folge ist ein erheblicher Aufwand, der vermieden werden könnte wäre die Seite von Anfang an Modular aufgebaut.

Modular bedeutet in diesem Zusammenhang, die strikte Trennung von bestimmten Seitenteilen, die dann in einer Masterdatei zusammengefügt werden. Bei einer Standard Hompage mit Kopf-, Navigations-, Inhalts- und Fußbereich hätte man also fünf Seiten die anzulegen sind. Die fünfte Seite wäre die Master oder wenn man so will die Index-Seite in der alle anderen Module per include eingefügt werden.

Bereits seit Einführung von CSS-Standards versucht man Seiten Modular zu gestalten, doch die Kapselung in verschieden physische Dateien ist eine neue Art der Websiteerstellung.

Was passiert nun, wenn ich Ajax benutzen will?
Da jedes Modul unabhängig voneinander nun  geladen werden kann, so ist es nun möglich (prinzipiell wie früher bei Frames) nun auf die Navigation zu klicken und nur den Contentbereich zu laden, was in dieser Form nur wenig Sinn macht, aber man stelle sich vor ein Shopsystem programmieren zu wollen. Wenn man nun Produkte in einen Warenkorb legt, macht es wenig Sinn die gesamte Seite neu zu laden, an dieser Stelle wäre es von Vorteil nur den Warenkorb zu aktualisieren ohne unnötig alle Produktbilder neu laden zu müssen.

Es ist also sehr sinnvoll bei Erstellung einer neuen Seite darauf zu achten mögliche Teile/Module nachladen zu können.