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.

Bei der Ausgabe von Daten in tabelarischer Form ist es oft gewünscht die Daten sortieren zu können.
Kommen die Daten aus einer Datenbank, z.B. einer MySql Tabelle, kann man die Daten über "ORDER BY" sortieren. Der Nachteil an dieser Technik ist, dass die Seite bei jeder neuen Sortierung auch neu geladen werden muss und wenn die Datenmengen recht überschaubar sind, sollte es nicht notwendig sein, die gesamte Seite neu zu laden.

Wer mit jQuery arbeitet, für den habe ich hier ein PlugIn gefunden, das einfacher nicht zu implementieren sein könnte: tableSorter von Motherrussia! ist in der zweiten Version verfügbar und ein wirklich einfaches Tool zur Sortierung von Tabellen.

Zu beachten gibt es lediglich, dass die Sortierung anhand der Tabellenheader erfolgt, was bedeutet, dass diese auch erstellt werden muss:

 
<table id="table" border="0">
<thead>
<th>Name</th>
<th>Vorname</th>
</thead>
 
...
...
 

Anhand der Header Spalten kann dann per Klick sortiert werden.
Die Initialisierung des Javascript erfolgt über:

 
<script>
$(document).ready(function() {
	$('#table').tableSorter();
});
</script>
 

Ab jetzt erkennt das PlugIn die Tabelle und ihre Werte (Daten, Zahlen, Strings, URLs, usw) automatisch und sortiert danach.
In der Dokumentation finden sich noch zahlreiche Anpassungsmöglichkeiten, die keinen Wunsch offen lassen.

UPDATE: Der Vollständigkeit halber sollte vielleicht erwähnt werden, dass auch und gerade weil es eine Javascript-Lösung ist, die Ladezeit bei großen Datenmengen ebenfalls imens steigt. Vor allem bei Browsern, deren Javascript-Engine recht langsam arbeitet sollte man in jedem Fall die serverseitige Sortierung vorziehen!

Im Blog von Daniel Stosch entdeckte ich das JQuery Plugin NyroModal.
Im Prinzip ein Lightbox-PlugIn wie thickbox, doch die Anpassbarkeit sowie die Animationsmöglichkeiten sind weitaus besser als bei thickbox. Die Einbindung erfolgt wie gewohnt über einen Klassennamen. Auf NyroModal gibts ein paar Demos.

Wer viel mit Ajax arbeitet wird früher oder später versuchen einige Variablen mit zu schicken, um mit diesen weiter arbeiten zu können. Wie bereits im Artikel weiter unten ist dies mit der load Funktion von Jquery möglich, oder aber mit $.post

Bei $.post wird im Gegesnatz zu load der Container nicht vor der Funktion definiert. Post dient als reine Sendefunktion. Das bedeutet, dass wenn wir die Seite bzw. einzelne Teile neu laden möchten wir dieses im Callback definieren müssen.

Der reine Post wird wie folgt definiert:

$.post("dieSeiteDieDenPostVerarbeitet.php", {datensatz1: "iregndwas1, datensatz2: "iregdnwas2"}, function(){});

Wer nun mit Firebug arbeitet wird erkennen, dass in der Konsole der Post losgeschickt wird. Mit Friebug kann man dann auch das Ergebnis abrufen. Um dass dann auch auf der Seite sichtbar machen zu können benutzen wir die Callback Funktion. Callback heißt hier, dassobald die Daten geladen sind, diese Funktion aufgerufen wird.

Wir erweitern also unseren post wie folgt:

$.post("dieSeiteDieDenPostVerarbeitet.php", {datensatz1: "iregndwas1, datensatz2: "iregdnwas2"},
function(data){$('#container').html(data);});

An dieser Stelle passiert folgendes. Alles was die php-Datei zurückliefert wird in die Variable "data" geschrieben.
Diese Daten, geformt wie auch immer, werden dann in den container geladen. Da wir keine Seite oder url laden sondern nur daten haben benutzen wir die Funktion html(), mit der einfach html Content ersetzt wird.

Manchmal ist es von Vorteil bei Klick auf einem Link nicht die gesamte Seite neu laden zu lassen, sondern lediglich einen Teil der Seite (z.B. ein einzelner <div> - Container).
Genau für solche Fälle gibt es in JQuery die einfache und nützliche Funktion load().
Die Einbindung in die eigene Homepage ist denkbar einfach. Man lade sich die aktuelle Version von JQuery runter und binde diese im Header ein.
Nun kommen wir bereits zum Link. Diesem können wir ein "onclick"-Ereignis mit folgendem Wert geben:

onclick="javascipt: $('#content').load('seite.html');"

Was passiert hier?
Nun ja zunächst weisen wir mit $('#content') JQuery an im nachfolgenden Befehl den Dvi-Container mit der ID 'content' zu benutzen. Im nächsten Schritt binden wir bereits unsere externe Datei ein.

Es muss sich nicht zwangsläufig um eine HTML-Datei handeln, sollen allerdings Parameter übergeben werden so empfielht sich die Funktion jquery.ajax().

Ich habe die load Funktion im Header noch etwas bearbeitet um ein fade-effekt zu realisieren:

 
$.function loadPage(output, href){
$(output).fadeOut(200);
$(output).load(href);
$(output).fadeIn(200);
};

Jetzt wird der Inhalt etwas schöner bearbeitet.

Wer kennt sie nicht, die schönen Cover-/Imageflows von iTunes und Co. Bislang war man da auf Flash angewiesen und der Einbau in ein CMS zur Pflege der einzelnen Bilder gestaltete sich auch als recht komplex - wenn nicht unmöglich.
Nun gibt es eine Alternative die genauso aussieht, aber auf Flash verzichtet. Eine reine Ajax Anwendung, die vom HTML-Code nicht einfacher zu pflegen sein könnte.
MooFlow setzt auf das Ajax-Framwork Mootools und kann so auf Flash verzichten. Sicher muss Javascript aktiviert sein, aber es ist erwiesener Maßen so, dass mehr Nutzer Javascript aktiviert haben, als die neuste Flash-Version auf dem PC. Außerdem ist es einfacher.

Wer sich näher damit beschäftigt, wird merken, dass der HTML-Code für diesen Coverflow mehr als einleuchtend und einfach ist.
Lediglich ein Div-Container muss erstellt werden, indem alles reinkommt, was man im Coverflow sehen möchte, auch Links zu weiterem Content sind möglich.
Wenn ich es irgendwann brauche, werde ich hier einen Link posten.

UPDATE: Hier eine Variante für das jQuery Framework http://www.blarnee.com/projects/coverflow/

UPDATE: Ich habe es nun in einem Projekt umgesetzt. Es ist ein Verlag der seine Buchcover auf der Startseite vorstellt.  Hier gehts zur Seite

In Suchfeldern findet man oft die Funktion, dass der Value des input-Feldes verschwindet sobald man hineinklickt. Diese Funktionalität ist aus einer Kombination der Attribute onblur und onfocus realisierbar:

<input name="search" value="Suchbegriff" onfocus="javascript:if (this.value == 'Suchbegriff') this.value = '';" onblur="javascript:if (this.value == '') this.value = 'Suchbegriff';" title="Suchbegriff"/>

Zwar ist Javascript verpöhnt, da es zuviele Sicherheitsrisiken bürgt, doch wer nicht darauf verzichten will und seine Seite etwas anschaulicher darstellen will, dem empfehle ich [url=mootools.net]mootools.net[/url] Es ist ein sehr gutes xhtml konformes Javascript/Ajax Framework, dass frei benutzbar ist. Unter Demos lassen sich einige Beispielcodes direkt anschauen.