Oft wäre es für den Benutzer von Vorteil, im Internet präsentierte Tabellen nach bestimmten Gesichtspunkten sortieren zu können. Der Artikel beschreibt eine Methode, wie Entwickler diese Funktionalität anbieten können.
Einer der häufigsten Einsatzzwecke des Internets ist die Anzeige von Informationen in Tabellenform, zum Beispiel:
- Listen von Ereignissen in chronologischer Reihenfolge
- Inhalt eines Artikels
- Preislisten
In vielen solchen Situationen möchten die Benutzer womöglich die dargebotenen Informationen in einer anderen Reihenfolge angezeigt bekommen, als sie ursprünglich von der Website bereitgestellt werden, etwa in alphabetischer statt in chronologischer Reihenfolge oder nach Vor- statt nach Nachnamen sortiert. In diesem Artikel sollen einige Methoden vorgestellt werden, die Entwickler einsetzen können, um den Endbenutzern eine solche Funktionalität zur Verfügung zu stellen.
Sortieren
Als einfachste Lösung könnte man für jede beliebige Sortierung, die vom Benutzer gewünscht wird, eine separate Seite erstellen und pflegen. So könnte man zum Beispiel eine Liste von Personen liefern:
|
Vorname |
Nachname |
|
Hans |
Mueller |
|
Micky |
Mouse |
|
Minnie |
Mouse |
|
James |
Bond |
|
Luis |
Trenker |
Nun könnte man damit rechnen, dass die Benutzer für diese Daten die folgenden Sortierreihenfolgen wünschen:
- nach Vornamen, aufsteigend alphabetisch
- nach Vornamen, absteigend alphabetisch
- nach Nachnamen, aufsteigend alphabetisch
- nach Nachnamen, absteigend alphabetisch
Bei einer so kleinen Datenmenge oder Inhalten, die lange Zeit unverändert bleiben, kann man durchaus eine separate Seite für jede Sortierreihenfolge erstellen, wie Demo1a des zugehörigen Demonstrationsbeispiels zeigt (Download[1]). Für umfangreichere, komplexere oder dynamische Informationen wird dieser Ansatz allerdings ziemlich schnell recht ressourcenintensiv und schwierig zu pflegen, so dass man sich nach Alternativen umschauen muss. In diesem Artikel sollen drei prinzipiell unterschiedliche Ansätze vorgestellt werden:
- Clientseitig: Diese basieren vorrangig auf Funktionen, die auf der Seite des Clients bereitgestellt werden: Javascript, DHTML, DOM des Browsers etc.
- Serverseitig: Diese basieren vorrangig auf Funktionen, die auf Serverseite bereitgestellt werden: ASP, ASP.NET, Datenbanken etc.
- Kombinationen: Diese verbinden Funktionen von Server- und Clientseite, zum Beispiel könnte eine ASP-generierte XML-Datei auf Clientseite per JavaScript sortiert werden.
--------------------------------------------------------------------------------
Hinweise zum Demonstrationsbeispiel
Die Demonstrations-Dateien dieses Downloads[1] sollten im selben Verzeichnis entpackt werden. Einige der Dateien erfordern einen ASP-Interpreter, ActiveX Controls oder andere serverseitige Websoftware.
--------------------------------------------------------------------------------
Clientseitig
Zuerst soll ein Blick auf clientseitige Möglichkeiten geworfen werden. Diese Beispiele erfordern, dass der Browser clientseitig Javascript aktiviert hat, was bei den meisten Browsern der Fall sein dürfte (siehe W3Schools Browser Survey[2]). Einige der Beispiele nutzen auch Funktionen, die nur von bestimmten Browsern wie dem Internet Explorer oder Firefox unterstützt werden.
Javascript bringt von Hause aus eine Sortiermethode mit (SORT), welche eine Datenmenge sortieren kann. Wenn man die Daten als Array speichert, kann man sie mit einer Funktion, die der ähnlich ist, die in Demo 2[1] gezeigt wird, schnell sortieren. Wegen der einfachen Benutzung wird dafür ein Array von Objekten eingerichtet, wo jedes Objekt über zwei Eigenschaften verfügt: Vorname und Nachname (vergleiche Listing A[3]).
Das Array personArray ist ein Array von Objekten und zunächst unsortiert. Nach Ausführen der Funktion buildIndex ist das Array alphabetisch nach Nachnamen sortiert (siehe Demo 2 im Download[1] ).
Das eigentliche Sortieren erfolgt sehr schnell, aber was fängt man dann mit den sortierten Daten an? Sie müssen schließlich noch für die Anzeige aufbereitet werden, wofür es zwei einfache Methoden gibt:
Die erste besteht darin, im Query-String des Browsers einen Parameter zu übergeben, den die Javascript-Funktion beim Laden auswertet. Die Daten werden entsprechend sortiert. Dann muss man sie an der entsprechenden Stelle im Code nur noch ausdrucken (vergleiche Demo 3[1]). Die zweite Option besteht darin, ein HTML-Element zu erstellen, welches per DHTML und Javascript mit den korrekt sortierten Daten gefüllt wird (vergleiche Demo 4[1]).
Das erste Beispiel erfordert einen Post-Befehl zurück zum Server, um die aktuelle Seite erneut abzurufen und sie dann beim Laden zu sortieren. Das zweite Beispiel erledigt dies ohne Request an den Server und ist daher der bessere Ansatz. Diese Methode kommt vielfach zum Einsatz, zum Beispiel auf der Webseite Livelink Customisation Index[4].
Eine weitere Möglichkeit besteht darin, die Daten in einem anderen Format zu veröffentlichen (zum Beispiel Microsoft Excel), mit dem der Benutzer vertrauter ist und welches bessere Funktionen bietet, um die Daten zu sortieren. Ein Beispiel findet sich in Demo 5[1] (welches nur im Internet Explorer mit aktivierten Active X Controls funktioniert). Als nächstes sollen verschiedene Möglichkeiten betrachtet werden, die vorrangig auf dem Server ausgeführt werden. Für diese Beispiele kommt Classic ASP, geschrieben in VB Script, zum Einsatz. Sie lassen sich aber einfach und problemlos auch in andere Programmiersprachen übertragen. Der nächstliegende Ansatz besteht darin, die Daten in einer Datenbank zu speichern. Die ASP-Seite kann dann eine Verbindung zu dieser Datenbank herstellen und sie mit einer ORDER BY-Klausel abfragen, um die richtige Reihenfolge zu erhalten. Dann kann man dem Benutzer das Ergebnis in einer HTML-Tabelle präsentieren (vergleiche Demo 6[1]). Eine Implementierung dieses Codes mit JSP (Java Server Page) oder PHP würde ganz ähnlich aussehen und ähnlich schnell ausgeführt werden.
Zusätzlich zu diesen "interpretierten" Seiten könnte man auch eine kompilierte Seite verwenden. Auf dieser einfachen Stufe könnte das eine VB-DLL zur Verwendung mit einer Classic ASP-Seite sein oder ein Java-Servlet für die Verwendung mit einer JSP-Seite. Die folgenden Definitionen von "interpretiert[5]" und "kompiliert[6]" erläutern die Unterschiede zwischen beiden Methoden. Eine weitere Möglichkeit, die immer häufiger von Entwicklern gewählt wird, ist der Einsatz von Microsofts .NET Framework, das unter anderem das Steuerelement DataGrid mitbringt, welches in Demo 7[1] zu sehen ist.
Kombinationen
In einigen Fällen können Client und Server zusammenarbeiten, um dem Benutzer die gewünschte Funktionalität bereitzustellen. Hierzu gibt es mehrere Methoden, von denen einige im folgenden besprochen werden sollen.
Die einfachste Möglichkeit besteht darin, dass der Server eine Seite mit den Daten liefert. Das Javascript auf der Clientseite aus den obigen Beispielen übernimmt das Sortieren und die Anzeige. Dies mag manchem als unsinnig erscheinen, denn schließlich könnte oder sollte man das Sortieren auch gleich auf der Serverseite vornehmen, aber es gibt Fälle, wo dies die optimale Lösung ist.
Wenn zum Beispiel die Datenmenge nicht besonders groß ist und die Verbindung zwischen Client und Server schlecht oder langsam ist, kann das Erzeugen der Rohdaten auf dem Server und die anschließende Lieferung samt Sortieranweisung an den Client - wo die eigentliche Sortierung stattfinden kann – die optimale Lösung sein. Ein Beispiel hierfür zeigt Listing B[7].
Eine weitere, ähnliche Möglichkeit bestünde darin, auf Serverseite statt ASP eine XML-Datei zu verwenden, welche wiederum auch von einer ASP-Datei erzeugt werden könnte. Auf Clientseite könnte der Sortiercode diese XML-Datei auf ähnliche Weise bearbeiten. Bei dieser Methode wird nur ein einzelner Request und nicht eine ganze Seite an den Server geschickt. Ein Beispiel hierfür ist das Laden einer XML-Datei, welche die Züge für ein Schachspiel enthält und die dann auf Clientseite geparst und verarbeitet wird, wie in diesem Beispiel gezeigt wird.
Eine leichte Variation dieses Themas würde den Einsatz eines neuen Browserfensters für die Interaktion mit dem Server umfassen, um die Daten zu erhalten und diese dann auf Clientseite verarbeiten zu lassen (vergleiche Demo 8[1]). Ähnlich kann man einen IFrame verwenden, der gegebenenfalls sogar vor dem Endbenutzer verborgen werden kann, wie Demo 9[1] zeigt. Alle oben beschriebenen Möglichkeiten sorgen dafür, dass die Daten sortiert und dem Benutzer angezeigt werden, aber welche ist am besten für eine bestimmte Datenmenge geeignet? Man würde erwarten, dass für kleine Datenmengen die clientseitige Verarbeitung deutlich schneller ist als die serverseitige Verarbeitung, wobei der Unterschied mit zunehmender Datenmenge größer wird, so dass ein serverseitiger Ansatz schließlich effizienter wird.
Um diese Hypothese zu prüfen, wurden Daten mit einer bestimmten Anzahl von Datensätzen mit den oben beschriebenen Methoden sortiert und die dafür benötigte Zeit (in Sekunden) gemessen, jeweils vom Anfang bis zum Ende der Ausführung jeder Methode. Die Ergebnisse finden sich in Tabelle A[8].
Wie man an den Ergebnissen erkennen kann, nimmt die Zeit, die für clientseitige Bearbeitung erforderlich ist, stetig zu, besonders bei den Methoden, welche eine erneute Anfrage an den Server erfordern. Bei den anderen Verfahren bleibt die Zeit bei so wenigen Datensätzen relativ konstant. Die Tests mit Active X liefern sehr gute Ergebnisse, dies liegt aber am Rückgriff auf die Sortierfunktionen von Excel, welches hierfür besonders geeignet ist. Der .NET-Code scheint auch recht schnell zu sein, was wahrscheinlich darauf zurückzuführen ist, dass er kompiliert wird, im Unterschied zum interpretierten Classic ASP.
Sortieren von Daten
Dieser Artikel hat eine Reihe unterschiedlicher Methoden vorgestellt, um Datensätze für den Benutzer zu sortieren. Einige von ihnen dürften eher unbekannt sein. Wie man sieht, zeigt der Performancetest deutlich, welche Methode für Datenmengen einer bestimmten Größe am besten geeignet ist. Man sollte aber daran denken, dass diese Ergebnisse anders aussehen können, wenn man komplexere Daten verwendet, zum Beispiel mehrere Personen mit identischem oder ähnlichem Nachnamen, oder wenn weitere Spalten bearbeitet werden müssen.
URLs in diesem Artikel:
[1] = http:/
[2] = http:/
[3] = http:/
[4] = http:/
[5] = http:/
[6] = http:/
[7] = http:/
[8] = http:/