Infos über Updates auf Twitter

Table Sort

Kleines Javascript, mit dem HTML-Tabellen im Browser sortiert werden können, ohne dass die Datei jedesmal neu geladen werden muss.

Beispiele

Die beiden Beispiele zeigen, wie der Tabellensortierer arbeitet:

Head-Bereich

Hier muss die Javascript-Datei eingefügt werden.

Body-Bereich

Sie benötigen eine oder mehrere html-Tabellen mit thead- und tbody-Bereich. Der tfoot-Bereich ist optional. Die Datenfelder im thead-Bereich müssen <th>-Felder und im tbody-Bereich <td>-Felder sein. Außer im tfoot-Bereich dürfen colspan und rowspan nicht verwendet werden. Die Tabelle darf zwar mehrere tbody-Bereiche enthalten, es wird aber nur im ersten sortiert.

Die Tabellen, die sortierbar sein sollen, und die Überschriften der Spalten, nach denen sortiert werden soll, müssen der Klasse "sortierbar" angehören. Spalten, die zuerst absteigend sortiert werden sollen, müssen in der Klasse "sortierbar-" sein. Die Überschriften können zusätzlich in der Klasse "vorsortiert+" oder "vorsortiert-" sein, wenn die Tabelle schon auf- oder absteigend sortiert ist. Ist die Überschrift in der Klasse "sortiere" oder "sortiere-", wird die Tabelle nach dem Laden der Seite nach dieser Spalte auf- oder absteigend sortiert.

Sollen die Tabellenfelder nicht nach ihrem Inhalt sortiert werden, kann der altermative Inhalt, nach dem sortiert werden soll, in einem Attribut "data-sort_key" abgelegt werden. Das Dokument sollte dann als HTML 5 ausgezeichnet sein.

Die Überschrift der Spalte, nach der sortiert wurde, wird durch die kleinen Pfeile ▲ oder ▼ gekennzeichnet. Normalerweise wird einer dieser Pfeile an das Ende der Überschrift gesetzt. Man kann aber durch Einfügen eines leeren span-Elements die Stelle für den Pfeil vorgeben.

Zahlenformate

Folgende Formate werden bei der Sortierung berücksichtigt:

Alles andere wird als Text interpretiert.

Die HTML-Datei

<!DOCTYPE html">
<html>
 <head>
  <meta charset="UTF-8" /">

  <!--weitere Angaben für den head-->

  <script type="text/javascript" src="TableSort.js"></script>
 </head>
 <body>

  <!-- ... -->

  <table class="sortierbar">
   <thead>
    <tr>
     <th class="sortierbar vorsortiert+">1. Spalte</th>
     <th class="sortierbar">2. Spalte</th>
     <th class="sortierbar">3. Spalte</th>

     <!-- usw. -->

    </tr>
   </thead>
   <tfoot>
    <tr>
     <td>Fuß 1</td>
     <td>Fuß 2</td>
     <td>Fuß 3</td>

     <!-- usw. -->

    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td>Daten 1</td>
     <td>Daten 2</td>
     <td>Daten 3</td>

     <!-- usw. -->

    </tr>

    <!-- usw. -->

   </tbody>
  </table>

    <!-- ... -->

 </body>
</html>

Die Javascriptdatei

Das Script muss nur im Head-Bereich eingebunden werden. Beim Seitenaufruf werden dann alle Tabellen mit dem Klassennamen "sortierbar" gesucht und deren Überschriften, wenn sie ebenfalls der Klasse "sortierbar" angehören, für die Sortierung anklickbar gemacht.

Version 8.20: TableSort.js

Infos über Updates auf Twitter @JBerkemeier.

Modifikation für per AJAX geladene Tabellen

Das Sortierscript ist in einer anonymen Funktion "versteckt", die sofort nach dem Laden der Seite ausgeführt wird. Dadurch wird verhindert, das es zu Überschreibungen mit anderen Scripten kommt. Allerdings kann der Sortierer daher auch nicht direkt aufgerufen werden, um nachträglich dynamisch erzeugte Tabellen sortierbar zu machen.

Um den Sortierer nachträglich zu starten, müssen ein paar kleine Veränderungen vorgenommen werden:

Sollen nur dynamisch erzeugte Tabellen sortiert werden, können die Zeilen mit addEventListener/attachEvent sowie die Funktion JB_initTable auch entfallen.

Technik

Wenn Sie sich für die Technik interessieren, im Wiki von selfhtml finden sie die Beschreibung zu einer einfacheren Version dieses Tabellensortierers.


4. 12. 2015 Jürgen Berkemeier