Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von gerry99

    gerry99

    10.02.2011 - 22:26

    Ich habe heute einige Stunden verbraucht, um die Tabelle sortierbar zu bekommen.
    Diese Anleitung hat es dann endlich gebraucht.
    Danke

  • Alternative Portrait von spaceemotion

    spaceemotion

    25.11.2010 - 15:55

    Tolle Präsentierung des Plugins. Kann gut was damit anfangen!

  • Alternative Portrait von Inhumantore

    Inhumantore

    29.10.2010 - 18:29

    Kurz und einfach, aber vor allem super verständlich und optimal vorbereitet. Danke!

  • Alternative Portrait von Inhumantore

    Inhumantore

    29.10.2010 - 18:29

    Kurz und einfach, aber vor allem super verständlich und optimal vorbereitet. Danke!

  • Alternative Portrait von Guerreiro84

    Guerreiro84

    27.07.2010 - 22:47

    Genau das was ich gesucht habe und dank deiner Erklärung endlich auch verstanden habe!
    Vielen Dank und weiter so.

    Freue mich schon auf Teil 3!

  • Alternative Portrait von Geri93

    Geri93

    14.07.2010 - 12:50

    Hi!
    Unter welcher Endung kann ichd as alles speichern? auch .php?

  • Portrait von fetterwurm

    fetterwurm

    18.04.2010 - 22:42

    Wirklich praktisch. Danke

  • Portrait von sdressler

    sdressler

    14.04.2010 - 22:52

    genialer Tip!! sehr einfach einzubinden und nachzuvollziehen!

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


Sie kennen Sortierfunktionen aus Excel und Calc. Dort kann man ganz bequem Spalteninhalte sortieren, indem man auf den betreffenden Spaltenkopf klickt. In HTML ist so etwas normalerweise nicht möglich. Dort wird üblicherweise einfach eine statische Tabelle angelegt. Sortiermöglichkeiten sind dort nicht vorgesehen. Während das Sortieren von Tabellen in HTML unmöglich ist, kann man dazu auf JavaScript zurückgreifen. Allerdings ist das äußerst aufwendig.

Mit jQuery lässt sich so etwas aber problemlos bewerkstelligen. Verwendet wird dafür das Plug-in Tablesorter, dessen offizielle Projektwebseite unter http://tablesorter.com/ zu finden ist. Das von Christian Bach entwickelte Plug-in kann kostenlos von der genannten Seite heruntergeladen werden. Dank dieses Plug-ins können Ihre Besucher die in der Tabelle enthaltenen Informationen beliebig sortieren. Dazu müssen sie nur auf die Spaltenüberschriften klicken.

Erfolgreich getestet wurde das Plug-in in den folgenden Browsern:
  • IE 6.0+
  • FF 2+
  • Safari 2.0+
  • Opera 9.0+
  • Konqueror

Die Tabellen lassen sich unter anderem anhand folgender Kriterien sortieren:
  • Texte
  • URIs
  • IP-Adressen
  • Datumsangaben
  • Zahlen
  • Aktualität

 
Darüber hinaus kann man aber auch eigene Sortiervarianten definieren. Wie leistungsfähig das Plug-in ist, kann man sich zum Beispiel auf der Seite http://tablesorter.com/docs/example-option-sort-force.html ansehen.

Bilder


Dieses Beispiel zeigt eindrucksvoll, wie sich Tabellendaten durch den Einsatz dieses Plug-ins sortieren lassen. Wenn Sie beispielsweise auf die Name-Spalte klicken, werden die Datensätze anhand des in der Name-Spalte enthaltenen Namens alphabetisch sortiert. Wobei das erste Anklicken eine aufsteigende Sortierung von A nach B bewirkt. Klickt man noch einmal auf den Spaltenkopf, wird die Sortierung umgekehrt.

Voraussetzung für den Einsatz des Plug-ins ist das Einbinden der jQuery-Bibliothek.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* <![CDATA[ */
   google.load("jquery", "1.4");
/* ]]> */
</script>

Zusätzlich muss das eigentliche Tablesorter-Plug-in integriert werden. Laden Sie sich das das Plug-in von der Seite http://tablesorter.com/ herunter und binden Sie es anschließend in Ihre Seite ein. Das könnte dann – je nachdem, wo Sie das Plug-in gespeichert haben – folgendermaßen aussehen:
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>

Wie üblich haben Sie die Wahl zwischen der normalen und der minimalen Variante. (Wobei für den Produktionseinsatz immer auf die minimierte Version zurückgegriffen werden sollte).
Im nächsten Schritt benötigten Sie eine Tabelle. In diesem Tutorial werden sich sämtliche Beispiele auf die nachfolgende Tabelle beziehen.
[Beispiel anzeigen]

Bilder

<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>

Es handelt sich hierbei um eine typische HTML-Tabelle, die in einen thead- und in einen tbody-Bereich aufgeteilt ist.
  • thead – definiert den Tabellenkopf
  • tbody – darüber wird der eigentliche Tabellenkörper definiert

Damit sind die Vorarbeiten abgeschlossen und es kann mit der Sortierung begonnen werden. Zunächst die einfachste Variante.
[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
   $("#meineTabelle").tablesorter();
 });
 /* ]]> */
</script>

Klickt man hier eine der Spaltenüberschriften an, wird die Tabelle anhand des Standardverhaltens (alphabetisch, numerisch usw.) sortiert. Auch wenn das zweifellos die simpelste Art der Sortierung darstellt, dürfte diese Anwendung für viele Applikationen bereits völlig ausreichend sein.

Bevor weitere Beispiele gezeigt werden, zunächst noch ein allgemeiner Hinweis hinsichtlich der Fehleranfälligkeit von Tablesorter. In früheren Versionen dieses Plug-ins wurde die Methode tableSorter() verwendet, wobei tableSorter() mit großem S geschrieben wurde. Verwendet man heute diese Syntax, führt das zu einer Fehlermeldung.

Bilder


Achten Sie unbedingt darauf, dass tablesorter() ausschließlich in Kleinbuchstaben geschrieben wird.
Im nächsten Beispiel wird die Sortierung direkt mit dem Laden der Seite ausgeführt, wobei ein nachträgliches manuelles Sortieren dennoch jederzeit möglich ist.
[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
  $("#meineTabelle").tablesorter({
     sortList: [[0,0]]
   });
 });
 /* ]]> */
</script>

Erreicht wird diese Vorsortierung durch die Anweisung sortList: [[0,0]]. (Achtung: sortList wird tatsächlich mit einem großen L geschrieben. Hier verhält es sich also anders als bei tablesorter(). Es ist zu hoffen, dass diese verwirrenden Schreibweisen noch vereinheitlicht werden). Hinter sortlist folgt ein Array mit Sortieroptionen. Wollen Sie zum Beispiel, dass die Tabelle anhand der ersten Spalte in aufsteigender Reihenfolge sortiert wird, geben Sie [0,0] an. Dabei steht die erste 0 für die 1. Tabellenspalte, die zweite für die Sortierung in aufsteigender Reihenfolge. (Wie bei Arrays üblich, beginnt die interne Zählung immer bei 0). Beachten Sie, dass Sie zwei eckige Klammerpaare benötigen, da ein Array erstellt wird, dessen Inhalt ein weiteres Array ist. Um eine absteigende Sortierung zu verwenden, geben Sie als zweiten Array-Wert eine 1 an.

Bei der Initialisierung der Tabelle können Sie übrigens auch gleich anhand mehrerer Spalten sortieren. Eine solche Doppelsortierung kann durchaus sinnvoll sein. Stellen Sie sich eine Produktdatenbank vor. In der ersten Spalte sind die Preise der Produkte enthalten. Die Tabelle soll nun zunächst anhand der Preise von billig bis teuer sortiert werden. Nun kann es aber natürlich sein, dass es mehrere Produkte gibt, die den gleichen Preis haben. In einem solchen Fall fügen Sie ein zweites Sortierkriterium ein. Bei dem werden preisgleiche Produkte nach den Produktnamen sortiert, sodass eine zusätzliche alphabetische Sortierung erreicht wird, wenn die Produkte gleich viel kosten.

Beachten Sie, dass im folgenden Beispiel die HTML-Tabelle angepasst wurde. Nur so wird der Effekt der Sortierung hier deutlich.
[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
 $("#meineTabelle").tablesorter({
 sortList: [[0,0],[2,0]]
 });
 });
 /* ]]> */
 </script>

In diesem Beispiel wird zuerst nach der ersten Spalte aufsteigend sortiert. Im zweiten Schritt wird nach der dritten Spalte sortiert, dort ebenfalls aufsteigend.


Fazit

Dieses erste Tutorial zu Tablesorter hat bereits gezeigt, wie leistungsfähig das Plug-in ist. Das Ende der Fahnenstange ist damit aber längst noch nicht erreicht. Denn nicht nur, dass das Plug-in noch weitere Sortiervarianten bereithält, auch die Gestaltung via CSS ist durchaus interessant. Mehr zu diesem Thema gibt es dann in einem weiteren Tablesorter-Tutorial.

vBulletin 0.04 • ZF-App 0.507 • Total 0.547