© Alan Reed, Fotolia.com

Große Datenmengen auf Webseiten übersichtlich anzuordnen ist eine Kunst. Am schnellsten gelänge es mit Javascript direkt im Client – wäre da nicht das spröde Document Object Model. Die Bibliothek Jquery erleichtert Entwicklern das Leben, indem sie die Skriptsprache aufpeppt und von Browsern abstrahiert.

Client-seitige Operationen sind durchaus nützlich – auch wenn Jahre des Streits um wenig nützlichen Eye Candy den Ruf von Javascript beschädigt haben. Sie ordnen etwa Tabellen nach Benutzerwunsch neu an, ohne den Server nochmals zu befragen. Wäre da nur nicht der mühsame Weg, den Javascript, CSS und das DOM vorgeben und den zudem diverse Browservarianten erschweren.

Neue Hoffnung versprechen einige Bibliotheken, allen voran Jquery [1]. Sie bietet ein API an, über das Entwickler den DOM-Tree manipulieren und das viele Praxisanforderungen abdeckt. Welche Untermenge der Elemente einer Seite der Entwickler auch auswählt oder verändert, beim Einsatz von Jquery reicht dafür oft eine einzige Zeile Code.

Hinzu kommen animierte Effekte, die ohne die Unterstützung einer Bibliothek eine umständliche Timer-Programmierung voraussetzen. Die separat, jedoch mit den Core-Entwicklern abgestimmte Erweiterung Jquery-UI [2] bietet Drag-&-Drop-Support und Widgets wie etwa Karteireiter an. Diese von anderen Javascript-Bibliotheken in den Vordergrund gerückten Widgets erlauben es, Ansichten ohne das Neuladen der Seite umzuschalten, oder öffnen Dialoge ohne neue Browserfenster [3]. Jquery darf der Entwickler unter der MIT-Lizenz oder der GPL 2 verwenden.

Konkret, bitte!

Gerade Tabellen, die viele Daten enthalten, aber nur einen Teil davon auf einmal anzeigen können, profitieren vom nachträglichen Aufpeppen durch Javascript: Dürfen Anwender etwa die Werte spaltenweise sortieren, erhalten sie eine bessere Übersicht. Den Anwendungscode, der die Tabellen erzeugt, ändert der Entwickler dazu nur minimal: Er bindet lediglich Jquery, die Sortierfunktion und ein Stylesheet in die Seite ein (Listing 1).

01 function sortTable(SortTable, SortColumn, Order){
02     var CurrentRow; var CurrentSortField; Rows=new Array();
03     var CurrentTable=$("table:eq("+SortTable+") tbody");
04 
05     $("tr", CurrentTable).each(function(i){
06         CurrentRow=$(this).html();
07         CurrentSortField=
08             $("td:eq("+SortColumn+")", this).text();
09 
10         Combined=new Array(2);
11         Combined[0]=CurrentSortField;
12         Combined[1]=CurrentRow;
13         Rows[i]=Combined;
14     })
15 
16     Rows.sort(function(a,b){
17         if (parseFloat(a[0]) && parseFloat(b[0]))
18                 return parseFloat(b[0]) - parseFloat(a[0])
19         else
20             return (a[0] < b[0]) ? -1 : 1
21     });
22     if (Order == "down") Rows.reverse();
23 
24     var TBody="";
25     for (j=0; j<Rows.length; j++){
26         TBody+="<tr>"+Rows[j][1]+"</tr>";
27     }
28     CurrentTable.html(TBody);
29     addClasses(SortTable);
30     var wholeTable=$("table:eq("+SortTable+")");
31     $("th img", wholeTable).attr('src', 'double-arrow.png');
32     var imgSrc=(Order=='up')?'up-arrow.png':'down-arrow.png'
33     $("th:eq("+SortColumn+") "+"img", wholeTable).attr('src', imgSrc);
34 }
35 
36 function addClasses(i){
37     var wholeTable=$("table:eq("+i+")");
38     $("tr, td", wholeTable).removeAttr("class");
39 
40     var oddRows=$("tr:odd", wholeTable);
41     $("td:even", oddRows).addClass("darkYellow");
42     $("td:odd", oddRows).addClass("lightYellow");
43     var evenRows=$("tr:even", wholeTable);
44     $("td:even", evenRows).addClass("darkBlue");
45     $("td:odd", evenRows).addClass("lightBlue");
46 
47     $("th", wholeTable).addClass("black");
48 }
49 
50 $(document).ready(function(){
51         $('th').click(function(){
52             SortTable=$("table").index($(this).parents("table"));
53             SortColumn=$("table:eq("+SortTable+") th").index($(this));
54             lastUp=$("table:eq("+SortTable+")").data('lastUp');
55             Order=(lastUp==SortColumn)?'down':'up';
56             $("table:eq("+SortTable+")")
57               .data('lastUp',(lastUp==SortColumn)?null:SortColumn);
58 
59             sortTable(SortTable, SortColumn, Order);
60         })
61 
62     $("th").prepend("&nbsp;<img src='double-arrow.png'>&nbsp;");
63     $("table").each(function(i){
64     addClasses(i);
65     $(this).before("<div class='collapseArrow'>"+
66        "<img src='collapse.png' align='left'> Tabelle "+(i+1)+"</div>")
67     })
68 
69     $('.collapseArrow').click(function(){
70         var Table=$(this).next();
71         if(!Table.data('hidden')){
72             Table.fadeOut('slow');
73             Table.data('hidden', true);
74             $(this).children('img').attr('src', 'expand.png');
75         }
76         else{
77             Table.fadeIn('slow');
78             Table.data('hidden', false);
79             $(this).children('img').attr('src', 'collapse.png');
80         }
81     })
82 })

Client-seitiges Sortieren per Javascript ist alles andere als eine Notlösung: Da kein Kontakt zum Server erforderlich ist, reagiert der Browser, zumindest bei nicht zu umfangreichen Tabellen, in Sekundenbruchteilen. Solange keine in Javascript schwer umsetzbaren Sortieralgorithmen, zu große oder sich Server-seitig schnell ändernde Datenmengen dem entgegenstehen, ist das Anwendererlebnis die Mühe wert. Dazu ist im vorgestellten Beispiel nicht einmal die Hilfe des Servers nötig, der die Auswahl von Seitenelementen mit »Id«-Attributen erleichtert.

Prinzipiell

Um die Tabelle zu sortieren, packt der Entwickler das HTML aller Zeilen in ein Array, sortiert es nach der gewünschten Spalte und überschreibt den bisherigen Tabellenkörper mit dem neu generierten (Abbildung 1). Dazu extrahiert er den Inhalt von Zeile »i« aus Tabelle »k«. Die Sortierfunktion braucht neben dem Code noch gesondert die Inhalte der zu sortierenden Spalte. Die Lösung findet sich in den Kapiteln “Selectors” und “Traversing” der Jquery-Dokumentation [4]. Selectors wählen einen Knotenpunkt des DOM-Trees aus, Traversing (Durchqueren) bedeutet in diesem Fall, aus der vorausgewählten Menge einzelne Elemente herauszugreifen.

Abbildung 1: DOM-Akrobatik ist gefragt: Die Sortierfunktion benötigt den HTML-Content aller Zeilen (blau), dazu gesondert den Text der Zellen, nach denen sie die Zeilen ordnen soll (orange).

Um mit Jquery die Zelle (i, j) der ersten Tabelle auszuwählen, genügt der im Vergleich zur normalen Javascript-Syntax kurze Ausdruck »$(table:eq(0) tr:eq(i) td:eq(j)).text()«. Zeile 8 in Listing 1 setzt diesen Ansatz um. »$()« ist die mit minimalem Tippaufwand verbundene Selektorfunktion, mit der praktisch jeder Jquery-Aufruf beginnt. Als Argument erhält er im Beispiel drei HTML-Tags gefolgt von einem durch den Doppelpunkt gekennzeichneten Filter. Reiht der Entwickler mehrere Selektoren – durch Leerzeichen getrennt – aneinander, so sucht der folgende Selektor innerhalb des Ergebnisses der vorausgehenden weiter. Ein Komma als Trennzeichen dagegen addiert die Ergebnisse. Der Filter »:eq(0)« greift das erste Element aus der Ergebnisliste heraus.

Außer nach Tag-Namen wählen Jquery-Selektoren Seitenelemente auch per ID, vor allem aber sogar nach Klassennamen aus. So beheben sie eines der Javascript-Ärgernisse, nämlich das Fehlen einer Funktion »getElementByClass()«. Mit »$.Klassenname[.Klassenname])« wählt Jquery alle DOM-Elemente, die einer oder mehreren Klassen angehören.

Unter den Filtern finden sich praktische Arbeitserleichterungen wie »:odd« und »:even«, die die Beispielanwendung für das abwechselnde Einfärben der Tabellenzeilen nutzt. Die Bibliothek filtert auch nach Attributen, zum Beispiel alle Elemente mit rotem Hintergrund. Den Funktionsumfang erläutert die Dokumentation in den Kapiteln “Selectors” und “Traversing” verständlich anhand von Beispielen (Abbildung 2).

Abbildung 2: Anschaulich und übersichtlich: Die Dokumentation ist ein starkes Argument für Jquery. Funktionen zum Traversing helfen Entwicklern auf dem Weg durch den DOM-Tree.

In Scheibchen geschnitten

Die ganze Logik für das Sortieren einer Tabelle steckt in der Funktion »sortTable()« ab Zeile 1. Sie erwartet drei Parameter. Die gleichnamige Variable »SortTable« ist die laufende Nummer der zu sortierenden Tabelle in der Seite, »SortColumn« die Nummer der Spalte, nach der »sortTable()« die Zeilen ordnen soll. »Order« legt fest, ob die Funktion aufsteigend oder absteigend sortiert.

Das Einlesen aller Tabellenzeilen setzt eine Schleife im Codefluss voraus. Wer über eine Liste ausgewählter Elemente iteriert, nutzt in Jquery die Methode »each()«. Sie akzeptiert als Parameter eine Callback-Funktion. Die ruft sie mit dem Schleifenzähler für jedes der vom vorangehenden Suchausdruck zurückgegeben Elemente auf. Innerhalb der Callback-Funktion deutet außerdem »this« immer auf das aktuelle DOM-Element.

Der Suchausdruck »$(table:eq(0) tr:eq(i) td:eq(j))« verkettet mehrere Selektoren durch Aneinanderreihen im Such-String. Möchte der Entwickler dagegen ein in einer Variablen gespeichertes Suchergebnis weiter einengen, gibt er das gespeicherte Ergebnis der neuen Suche als zweiten Parameter mit. Das spart Tipparbeit und verkürzt die Laufzeit. Die Zeile 3 wählt daher zunächst den Tabellenkörper der über »SortTable« festgelegten Tabelle. »CurrentTable=$(“table:eq(“+SortTable+”) tbody”)« speichert ihn in einer Variablen. Mehrere Suchausdrücke greifen später darauf zurück, etwa die Schleife über die Tabelle in Zeile 5.

Zeile 6 weist »CurrentRow« den Zeilencode zu. Auf dieser Basis baut »sortTable()« später die Tabelle neu zusammen. Damit sich die Zeilen überhaupt sortieren lassen, isoliert ein weiterer Jquery-Selektor den passenden Text. Der Parameter »SortColumn« der Funktion »sortTable()« wählt die Spalte aus: Ab Zeile 7 isoliert der Code »$(“td:eq(“+SortColumn+”)”, this).text()« aus der aktuellen Zeile »this« die Zelle entsprechend »SortColumn«.

Doppelter Boden

Arrays bringen in Javascript eine Methode »sort()« mit, die ihre Einträge als Strings sortiert. Sie akzeptiert als Parameter eine Callback-Funktion, sodass sie sich mit einem Trick dafür nutzen lässt, die Tabellenzeilen nach einer darin enthaltenen Spalte zu sortieren. Die Zeilen 11 bis 13 packen dazu in jedes Element des Array »Rows« ein weiteres Array. Es enthält unter Key »0« den Text der Zelle, nach der die Sortierfunktion die Tabelle ordnet. Key »1« speichert den Code der kompletten Zeile (Abbildung 3).

Abbildung 3: Neubaumaßname: Die Sortierfunktion liest alle Tabellenzeilen und parallel den Text der zu sortierenden Spalte ein. Nach dem Ordnen schreibt eine Schleife den HTML-Code des Tabellenkörpers neu.

Die »sort()«-Methode ruft den Callback so oft wie nötig mit zwei Elementen des zu sortierenden Array als Parameter auf. Gibt er eine negative Zahl zurück, ändert sich die Reihenfolge der Elemente, bei einem positiven Rückgabewert bleibt sie erhalten. Zeile 16 ruft die Methode auf und definiert die Callback-Funktion gleich inline als anonyme Funktion.

Die Funktion prüft, ob die von »sort()« als »a[0]« und »b[0]« übergebenen Inhalte der Zellen, nach denen zu sortieren ist, Zahlen sind, also mit einer Ziffer beginnen. Gilt a<b, fällt das Ergebnis der Subtraktion in Zeile 18 negativ aus und »sort()« verändert die Reihenfolge der zu sortierenden Zellen und der zugehörigen Codezeilen. Lassen sich die Zellen nicht als Zahlen interpretieren, gibt Zeile 20 das Ergebnis eines String-Vergleichs zurück. Zeile 22 dreht schließlich die Reihenfolge des Array um, wenn der Parameter »Order« den Wert »down« hat.

Für Ersatz gesorgt

Die Schleife ab Zeile 25 baut den Tabellenkörper aus dem nun sortierten HTML-Code der Zeilen in »Rows« zusammen. In Javascript lässt sich wie in vielen anderen Sprachen ein Array in einem Array durch Anhängen eines weiteren Schlüssels an das äußere ansprechen. »Rows[j][1]« gibt deshalb Zeile »j« zurück – allerdings nicht die ganze Tabellenzeile. »html()« in Zeile 6 gibt nur den Inhalt der Zeile zurück. Da die umschließenden »tr«-Tags fehlen, korrigiert das Zeile 26.

Am Ende des Schleifenlaufs enthält die Variable »TBody« den HTML-Code des Tabellenkörpers in sortierter Form. Zeile 28 nutzt noch einmal die ganz zu Beginn der Funktion »sortTable()« gefüllte Variable »CurrentTable«, um die Tabelle exklusive Kopfzeile in der Seite durch die eben neu erzeugte Version zu ersetzen. Dann ruft Zeile 29 die Funktion »addClasses()« auf, die der folgende Abschnitt erläutert.

Zuvor noch eine Kleinigkeit: das Anpassen des Sortierpfeils in der Kopfzeile. Zeile 31 setzt zunächst das »src«-Attribut aller Grafiken auf den Defaultwert, den weißen Pfeil mit Spitzen in beide Richtungen. Die Variable »wholeTable« in Zeile 30 dient als Kontext der Suche nach »img«-Tags in den Kopfzeilen. Sie enthält den Code der ganzen Tabelle inklusive Kopf. Ab Zeile 32 legt »imgSrc« den Namen der Grafik fest, die für aufsteigende oder absteigende Sortierung steht.

Bunt treiben

Das abwechselnde Blau-Gelb der Zeilen sowie die wechselnde Helligkeitsschattierung der Spalten basieren auf den Jquery-Filtern »:odd« und »:even«. Die Funktion »addClasses()« ab Zeile 36 kümmert sich darum. Nicht nur Zeile 29 ruft sie nach dem Sortieren auf, sondern auch Zeile 64 beim ersten Laden der Seite aus der Funktion »document.ready()«, doch dazu später mehr.

Zu Beginn der Funktion wählt ein Selektor die Tabelle »i«, dieses Mal inklusive Tabellenkopf. Zeile 41 entfernt das Attribut »class« von allen »tr«- und »td«-Elementen im Kontext »wholeTable«. Dies tilgt alle der Tabelle zugewiesenen CSS-Stile, da die Einfärbung der Zeilen nach jedem Sortieren durcheinandergerät. Das Kapitel “Attributes” der Jquery-Dokumentation [4] erläutert im Detail die dazu benutzte Methode »removeAttr()« sowie alle weiteren Befehle zum Verändern von HTML-Attributen.

Zeile 40 weist der Variablen »oddRows« alle ungeraden Zeilen zu. Zwei weitere Selektoren, »td:odd« und »td:even«, picken aus dieser Untermenge die geraden und ungeraden Zellen heraus und färben sie hell- oder dunkelgelb. Die Methode »addClass()« weist den Zellen passende CSS-Stile zu. Neben »addClass()« hält Jquery noch etwa ein Dutzend weitere Befehle zur CSS-Formatierung bereit. Die Zeilen 43 bis 45 wiederholen den beschriebenen Vorgang für die geraden Zeilen mit der Farbe Blau. Zum Schluss bindet Zeile 47 noch den Stil »black« an alle Zellen im Tabellenkopf.

Reaktionsfreudig

Die Funktion zum Sortieren und Einfärben der Tabelle ist nun fertig, doch niemand kann sie aufrufen, solange Eventhandler fehlen, die auf einen Klick in eine Tabellenkopfzeile reagieren. Beim Binden von Events tritt eine Design-Schwäche von Javascript und DOM zu Tage: Steht der Code dazu im Seitenquelltext, scheitert er möglicherweise: Hat der Browser ein DOM-Element noch nicht gerendert, will aber dort den Handler ankoppeln, gibt das eine Race Condition. Sie ist der Javascript-Implementierung der Browser geschuldet.

Abhilfe schafft die Jquery-Funktion »$(document).ready(Callback)«, die erst abläuft, wenn der DOM-Tree fertig aufgebaut ist. Grafiken müssen dazu noch nicht geladen sein. Der Code, der die Eventhandler setzt, steht daher in dieser Funktion. Ebenso die Zeilen, die die Zellenfarbe setzen, kleine Pfeile in die Kopfzeilen schreiben und die Tabellenüberschrift mit einem Button zum Einklappen der ganzen Tabelle hinzufügen.

Am elegantesten lassen sich Eventhandler mit Hilfe eine Sammelzuweisung setzen: Ein Selektor wählt alle Tabellenkopfzellen aus und übergibt sie der Jquery-Methode »click(Callback)« in Zeile 51. Dies bindet die Callback-Funktion in einem Rutsch an alle Kopfzellen, die auf der Seite existieren. Bei dieser Massenabfertigung ist es allerdings unmöglich, der Callback-Funktion individuelle Parameter, zum Beispiel die laufende Nummer der zu sortierenden Tabelle und Sortierspalte, zu übergeben. Die braucht der Eventhandler jedoch, um »sortTable()« mit den richtigen Parametern aufrufen zu können (Abbildung 5).

Abbildung 4: Vorher und nachher: Der Javascript-Code formatiert die Tabellen und macht sie dynamisch: Ein Klick auf einen Spaltenkopf sortiert sie, der Button in der Überschrift dient zum Einklappen der ganzen Tabelle.

Abbildung 5: Da ein Sammelaufruf den Eventhandler auf einmal an alle Kopfzellen der Seite bindet, muss dieser Tabellen- und Spaltennummer für die »sortTable()«-Funktion aus dem Pointer »this« errechnen.

Nicht ohne Anschluss

Zum Glück deutet in einem Eventhandler »this« auf das DOM-Element, das den Event auslöst. Da es sich um eine Zelle im Kopf der zu sortierenden Tabelle handelt, leitet der Programmierer daraus ab Zeile 52 »SortTable« und »SortColumn« ab: Der Selektor »$(‘table’)« wählt alle Tabellen der Seite aus. Die darauf angewandte Methode »index()« gibt die Position eines Einzelelements in der Liste aller Tabellen zurück. Das ist der »table«-Container, der in Elternrelation zu »this« steht. Der Index der zu sortierenden Spalte ergibt sich aus den Kopfzeilen der Tabelle (»$(“table:eq(“+SortTable+”) th”)«) und »this«.

Nun könnte der Eventhandler die Sortierfunktion bereits mit den Parametern »sortTable(SortTable, SortColumn, ‘up’)« aufrufen. Da mehrere Klicks auf eine Kopfzeile die Tabelle jedoch abwechselnd auf- und absteigend sortieren sollen, merkt sich der Code, auf welche Spalte in der aktuellen Tabelle der Benutzer zuletzt geklickt hat. Die Jquery-Methode »data()« bindet den Wert direkt an einen DOM-Knoten, das »table«-Tag der aktuellen Tabelle. Das macht ein weiteres Array mit Einträgen für alle Tabellen unnötig.

Hoch und runter

Zeile 54 liest den Wert aus, der unter »lastUp« für die aktuelle Tabelle zu finden ist. Steht dort noch nichts, führt das nicht zu einer Fehlermeldung, sondern nur zu einem leeren Rückgabewert. Der folgende ternäre Operator gibt »down« zurück, wenn »lastUp«, die Spalte der letzten Aufwärts-Sortierung, mit der aktuellen Spalte übereinstimmt, sonst »up«. Ein weiterer ternärer Operator löscht im ersten Fall die Daten unter »lastUp«. Stimmen die Variable und die aktuelle Spaltennummer nicht überein, schreibt er den aktuellen Spaltenindex hinein. Nun ist alles bereit für den Aufruf der Sortierfunktion in Zeile 59, die die Tabelle nach der geklickten Spalte sortiert.

Indirekt mit der Sortierung hat noch Zeile 62 zu tun: Sie fügt beim Laden der Seite vor die »th«-Zellen im Kopf kleine Doppelpfeile ein, um zu zeigen, dass sich die Tabellen sortieren lassen. Die Methode »prepend()« fügt die dazu erforderlichen »img«-Tags ein.

Der bisher besprochene Code hat statische Tabellen sortierbar gemacht und die Zellen und Zeilen zur besseren Lesbarkeit abwechselnd eingefärbt. Das Beispiel schneidet dabei die wichtigsten Kernbereiche der Jquery-Bibliothek an: Selektoren zur Auswahl von DOM-Elementen sowie die Manipulation von HTML- und CSS-Attributen. Nach der Pflicht ist es nun Zeit für die Kür, die optischen Effekte wie das animierte Einklappen oder Ausblenden von Seitenelementen. Das sieht nicht nur schmuck aus, es hilft auch dem Benutzer zu erfassen, was sich an einer Seite verändert.

Das Beispiel setzt vor jede Tabelle eine Überschrift, die einen Button zum Ausblenden der ganzen Tabelle enthält. Die Zeilen 63 bis 67 iterieren dazu mit der »each()«-Methode über die Tabellen der Seite. In der Schleife steht auch der Funktionsaufruf von »addClasses()«, der die Zellen und Zeilen abwechselnd einfärbt. Danach schreibt die Methode »before()« den HTML-Code für die Tabellenüberschrift, ein einfaches »div«-Tag, vor die Tabelle. Da »before()« eine Jquery-Methode ist, lässt sie sich nicht direkt über den Javascript-Pointer »this« aufrufen. Anders als bei in Variablen gespeicherten Ergebnissen von Jquery-Aufrufen packt der Entwickler daher »this« in die Dollar-Funktion »$()«.

Klappmechanismus

Die Zeilen ab 69 klappen die Tabelle per Eventhandler ein. Sie binden ihn über die CSS-Klasse »collapseArrow« an die zuvor erzeugten Überschriften. In der Jquery-Syntax zeigt ein Punkt an, dass das ein Klassenname ist. Der Handler benutzt die Methode »data()«, um ein Flag direkt im DOM-Element »table« zu speichern. Es zeigt an, ob die Tabelle gegenwärtig versteckt ist. Ist das Flag »hidden« gesetzt, blendet »fadeOut()« die Tabelle langsam aus, »Table.data(‘hidden’, true)« setzt es auf »true«. Die folgende Zeile ändert das »src«-Attribut des Buttons von »collapse.png« nach »expand.png«. Ist »data(‘hidden’)« dagegen wahr, blendet der Code ab Zeile 76 die Tabelle ein, setzt das Flag auf »false« und stellt den Ausgangszustand wieder her.

Standard für Javascript

Jquery vereinfacht mit ihrer bündigen Syntax das in bloßem Javascript oft sperrige Arbeiten mit dem DOM-Tree. Sie überdeckt auch die Ungereimtheiten der Javascript-Engines der Browser und spart damit viel Mühe beim Testen. Wenige andere Libraries können mit der gebündelten Effizienz von Jquery mithalten, auch nicht das wesentlich umfangreichere YUI [5], sodass Jquery vielen bereits als Javascript-Standardbibliothek gilt. Wer sich weitere Alternativen ansehen möchte, wirft noch einen Blick auf Dojo [6] und die Mootools [7]. (mg)