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.

Der Tabellensortierer kann mit der Maus, mit einem Touchscreen oder mit der Tastatur bedient werden. Für assistive Technologien wird der Sortierstand und die Sortierrichtung in visuell vesteckten Texten angezeigt.

Beispiele

Die beiden Beispiele zeigen, wie der Tabellensortierer arbeitet:

Einbinden des Sortierers

Im Head- oder im Body-Bereich der Seite muss die Javascript-Datei eingefügt werden.

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.

Das Verhalten des Tabellensortierers wird durch class-Attribut gesteuert. 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 Symbole an das Ende der Überschrift gesetzt. Man kann aber durch Einfügen eines leeren span-Elements die Stelle für die Symbole 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>

Custom events (Neu!)

Um in den Sortierprozess eingreifen zu können, wurden 5 Custom Events eingebaut:

presortinit
Feuert, wenn die Funktion aufgerufen wird, die die Tabelle sortierbar macht.
aftersortinit
Feuert, wenn die Funktion gelaufen ist, die die Tabelle sortierbar macht.
presort
Feuert, wenn der Sortierer aufgerufen wurde, noch vor dem Sortieren.
Parameter in detail:
sortcol
Spaltennummer der Spalte, nach der sortiert werden soll; beginnt mit 0
aftersort
Feuert, wenn die Sortierung abgeschlossen ist.
Parameter in detail:
sortcol
Spaltennummer der Spalte, nach der sortiert wurde; beginnt mit 0
tableSortLoadad
Feuert, wenn das Script geladen und ausgeführt wurde. Sinnvoll in Verbindung mit dem Parameter autoload=false.
Parameter in detail:
tableSort
Funktion, die die Tabelle sortierbar macht.

Siehe hierzu das 3. Beispiel

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. Mit dem Parameter autoload=false wird dasScript nur geladen, ohne die Tabellen zu suchen und sortierbar zu machen.

Version 10.6.3 vom 4. 11. 2020: TableSort.js

Infos über Updates auf Twitter @JBerkemeier.

Sortieren von per XMLHttpRequest (AJAX) oder fetch geladene Tabellen (Geändert!)

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.

Wie man den Sortierer nachträglich startet, zeigt das 3. Beispiel. Hierzu werden die Custom Events verwendet.

Technik

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

Lizenzbedingung

Das Script steht unter der Lizenz CC BY-SA 4.0 (Namensnennung - Weitergabe unter gleichen Bedingungen 4.0 International).


4. 11. 2020 Jürgen Berkemeier