Infos über Updates auf Twitter

Table Sort

Kleines Javascript, mit dem HTML-Tabellen im Browser sortiert werden können, ohne dass die Datei jedes Mal 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 auch 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.

Wenn der thead-Bereich mehrzeilig ist, muss die Zeile mit den Sortierüberschriften die Klasse "sortierbar" haben.

Im Folgenden sind die Klasssen, über die der Tabellensortierer gesteuert wird, aufgelistet:

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

Die Überschriften der Spalten, die sortierbar sind, werden durch die Symbole △▽ gekennzeichnet, die der sortierten durch die Symbole ▲▽ oder △▼. Normalerweise werden diese Pfeile an das Ende der Überschrift gesetzt. Man kann aber durch Einfügen eines leeren span-Elements die Stelle für den Pfeil vorgeben.

Hat die Tabelle einen caption-Bereich, wird dieser um einen Hinweis auf die Sortierbarkeit der Tabelle ergänzt.

Nach dem erfolgreichen initialisieren des Tabellensortieres wird der Tabelle noch die Klasse "is_sortable" hinzugefügt.

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 src="TableSort.js"></script>
 </head>
 <body>

  <!-- ... -->

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

     <!-- usw. -->

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

     <!-- usw. -->

    </tr>

    <!-- usw. -->

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

     <!-- usw. -->

    </tr>
   </tfoot>
  </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 10.0 vom 28. 3. 2019: TableSort.js (Der IE 8 wird ab 9.4 nicht mehr unterstützt)

Infos über Updates auf Twitter @JBerkemeier.

Modifikation für per XMLHttpRequest (AJAX) oder fetch geladene Tabellen

Das Sortierscript ist in einer anonymen Funktion "versteckt", die sofort nach dem Laden der Seite ausgeführt wird. Dadurch wird verhindert, dass 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, kann auf die Registrierung des Eventhandlers für DOMContentLoaded verzichtet werden.

Technik

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


28. 3. 2019 Jürgen Berkemeier