Anzeige
Tutorialbeschreibung

jQuery - Tabellen mit Tablesorter sortieren - Teil 02

jQuery - Tabellen mit Tablesorter sortieren - Teil 02

Wie sich mit dem Tablesorter-Plug-in Tabellen sortieren lassen, wurde in einem ersten Tutorial bereits gezeigt. Allerdings bietet Tablesorter noch zahlreiche andere Möglichkeiten. Diese betreffen zunächst einmal die reine Funktionalität. Ebenso hat das Plug-in aber auch noch einiges auf dem Gebiet der optischen Anpassung zu bieten. In diesem Tutorial stehen zunächst zusätzliche Funktionalitäten im Vordergrund. Dabei geht es darum, wie Sie Daten per Mausklick in Tabellen einfügen können. Ein anderes Beispiel zeigt, auf welche Weise sich Tabelleninhalte durch Anklicken eines Hyperlinks sortieren lassen.


Um mit dem Tablesorter-Plug-in arbeiten zu können, braucht man als Ausgangspunkt eine Tabelle. (Dass man einer leeren Tabelle per Mausklick Daten hinzufügen kann, zeigt übrigens ein anderes Beispiel in diesem Tutorial). Den in diesem Tutorial verwendeten Beispielen liegt die folgende Tabelle zugrunde:

<table id="meineTabelle">
   <thead>
     <tr>
       <th>Name</th>
       <th>Vorname</th>
       <th>Verkaufsrang</th>
       <th>Preis</th>
       <th>E-Mail</th>
       <th>Datum</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Hornby</td>
       <td>Nick</td>
       <td>1023</td>
       <td>$9.99</td>
       <td>nh@gmail.com</td>
       <td>Jul 6, 2010</td>
     </tr>
     <tr>
       <td>Welsh</td>
       <td>Irvine</td>
       <td>987</td>
       <td>$19.99</td>
       <td>iw@gmail.com</td>
       <td>Dec 12, 2005</td>
     </tr>
     <tr>
       <td>Roth</td>
       <td>Phillip</td>
       <td>18</td>
       <td>$11.99</td>
       <td>pr@gmail.com</td>
       <td>Jan 11, 2003</td>
     </tr>
   </tbody>
 </table>

Standardmäßig werden die Tabellen durch Anklicken der betreffenden Spaltenköpfe sortiert. Das ist zunächst einmal praktisch, allerdings nicht immer gewünscht. Durch ein einfaches Skript können Sie daher auch dafür sorgen, dass die Sortierung über einen Hyperlink vorgenommen wird. Bei der Gestaltung dieses Hyperlinks sind Ihnen dann natürlich keinerlei Grenzen gesetzt. So muss es sich bei diesem nicht etwa um einen Textlink handeln. Ebenso können Sie auch einen grafischen Hyperlink definieren. Die Funktionsweise ist bei beiden Varianten identisch: Wird der Hyperlink angeklickt, ändert sich die Sortierreihenfolge der Tabelle. Zunächst das Ausgangsdokument:
[Beispiel anzeigen]

Bilder



 
Wird nun der Hyperlink angeklickt, sieht die Sortierung folgendermaßen aus:

Bilder



Jetzt das eigentliche Skript:
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() { 
     $("table").tablesorter(); 
     $("#sortier").click(function() { 
         var sorting = [[0,0],[2,0]]; 
         $("table").trigger("sorton",[sorting]); 
         return false; 
     }); 
 });
 /* ]]> */
 </script>

Entscheidend ist hier die Zeile $("#sortier").click(function(). Denn hierüber wird die click()-Funktion an das Element mit der ID sortier gebunden. Und bei diesem Element handelt es sich um den entsprechenden Hyperlink. Innerhalb der sorting-Variable wird bestimmt, was wie sortiert werden soll. Im vorliegenden Beispiel werden die erste und die dritte Spalte sortiert. (Beachten Sie, dass die interne Zählung bei Arrays immer bei Null beginnt). Die anderen Optionen wurden bereits im ersten Tablesorter-Tutorial vorgestellt. Was jetzt noch fehlt, ist der eigentliche Hyperlink.
<a href="#" id="sortier">Sortiere die erste und die dritte Spalte</a>
Hierbei ist darauf zu achten, dass dem href-Attribut der Wert # zugewiesen wird. Zudem muss der Hyperlink die ID besitzen, die man auch im Skript angegeben hat.

 

 

Neue Daten hinzufügen

In den bisherigen Beispielen wurde immer auf bereits vorhandene Datensätze zurückgegriffen. Als Anwender hat man also eine Webseite aufgerufen, auf der eine Tabelle zu sehen gewesen ist. Die Daten dieser Tabelle konnte man dann – sei es durch Anklicken des Tabellenkopfes oder eines entsprechenden Hyperlinks – sortieren. Es geht allerdings auch anders. Denn die Daten lassen sich beispielsweise auch erst nachträglich einfügen. Wie das geht, zeigt das folgende Beispiel. Ruft man die Webseite auf, ist zunächst erst einmal nichts anderes als der Tabellenkopf und ein Hyperlink zu sehen. [Beispiel anzeigen]
Bilder
 
Klickt man nun allerdings diesen Link an, wird die Tabelle mit Daten gefüllt.
Bilder
Auch hier zunächst wieder der Skriptbereich:
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() { 
     $("table").tablesorter();
     $("#hinzu").click(function() {
         // hier der entsprechende HTML-Bereich
         var html = "<tr><td>Hornby</td><td>Nick</td><td>1023</td><td>$9.99</td><td>nh@gmail.com</td><td>Jul 6, 2010</td></tr>";
                          html +=  "<tr><td>Welsh</td><td>Irvine</td><td>987</td><td>$19.99</td><td>iw@gmail.com</td><td>Dec 12, 2005</td></tr>";
                          html += "<tr><td>Roth</td><td>Phillip</td><td>18</td><td>$11.99</td><td>pr@gmail.com</td><td>Jan 11, 2003</td></tr>";
         // Die Daten werden hinter tbody eingefügt
          $("table tbody").append(html); 
         $("table").trigger("update");
         // Hier wird die Sortierung festgelegt
         var sorting = [[2,1],[0,0]]; 
         $("table").trigger("sorton",[sorting]); 
         return false; 
     }); 
 });
 /* ]]> */
 </script>

Das Skript selbst ist sehr einfach gehalten. Der hinzuzufügende HTML-Inhalt wird innerhalb der Variable html angegeben. Bei diesem Inhalt handelt es sich um den Tabellenkörper. Wichtig ist hier, dass dabei auch die eigentlichen Tabellenelemente tr und td verwendet werden. Damit sind die Vorarbeiten abgeschlossen. Um die Inhalte in die Tabelle einzufügen, wird $("table tbody").append(html);  verwendet. Dabei gibt man zunächst das HTML-Element an, dem die neuen Inhalte hinzugefügt werden sollen. Im vorliegenden Fall ist das das tbody-Element. Mit append(html); wird festgelegt, um welche Inhalte es sich bei den neuen Daten handelt. Im aktuellen Beispiel wurden die Daten statisch der Variable html zugewiesen.

Das Ganze lässt sich natürlich auch noch deutlich dynamischer gestalten. So könnte man zum Beispiel Textfelder anlegen, in die Daten eingetragen werden können. Sobald das Formular, in dem diese Felder enthalten sind, abgeschickt wird, werden die Felder ausgelesen, die Werte in einer Variable gespeichert und dann append() zugewiesen. Eine solche Anwendung ist also auch kein Problem. Die ursprüngliche Tabelle sieht folgendermaßen aus:
<table class="meineTabelle" cellspacing="1">             
     <thead>
         <tr>
          <th>Name</th>
          <th>Vorname</th>
          <th>Verkaufsrang</th>
          <th>Preis</th>
          <th>E-Mail</th>
          <th>Datum</th>
         </tr>
     </thead> 
     <tbody> 
     </tbody> 
 </table>
<a href="#" id="hinzu">Daten hinzufügen</a><br><br> 

Ausgelöst wird das Hinzufügen der neuen Inhalte durch Anklicken des Hyperlinks. Beachten Sie, dass die Daten hier bei jedem Anklicken des Hyperlinks erneut hinzugefügt werden, die Tabelle also immer länger wird.


 

Den Debug-Modus aktivieren

Im Zusammenhang mit der Entwicklung von Anwendungen, die auf Tablesorter basieren, kann der Debug-Modus interessant sein. Denn durch den lässt sich exakt überprüfen, ob und wie die Sortierung funktioniert. Dabei zeigt der Debug-Modus u.a. folgende Informationen:
  • Zeit zum Aufbau der Tabellenköpfe in Millisekunden
  • Informationen über die einzelnen Spalten
Die Daten können durchaus hilfreich sein. Aktiviert wird der Debug-Modus über die Anweisung debug: true. Ein Skript, in dem dieser Modus verwendet wird, könnte also folgendermaßen aussehen:
[Beispiel anzeigen]
$(document).ready(function() { 
     // call the tablesorter plugin 
     $("table").tablesorter({ 
         // enable debug mode
         debug: true 
     }); 
 });

Die Ergebnisse des Debug-Modus werden standardmäßig innerhalb von Ausgabefenstern angezeigt, die mittels alert() realisiert werden.

Bilder



Wer mit dem Firefox arbeitet und dort die Firebug-Extension installiert hat, der kann die Ausgabe des Debug-Modus allerdings auch in der Konsole verfolgen.

Bilder



Dank dieser Variante erspart man sich das permanente manuelle Schließen der alert()-Fenster. Die Microsoft-Entwicklertools, die es für den Internet Explorer gibt, unterstützen diese Funktion leider nicht.


Fazit

Die drei Beispiele dieses Tutorials haben noch einmal gezeigt, wie vielseitig Tablesorter eigentlich ist. Was jetzt noch fehlt, ist eine optisch ansprechende Gestaltung der Tabellen und der Sortierfunktion. Wie sich so etwas umsetzen lässt, ist Gegenstand eines weiteren Tutorials.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Inhumantore
  • 29.10.2010 - 19:21

Feine Weiterführung des ersten Teils! Bin auf den dritten gespannt.

x
×
×