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