tabsort.js

Funktionalität

Diese Scriptdatei enthält Funktionen, die dem Betrachter erlauben, Tabellenzeilen nach dem Inhalt von Spalten zu sortieren, indem er auf den Kopf einer Spalte klickt.

Das Skript setzt bestimmte Wörter in den class-Attributen der sortierbaren Tabellen und der Köpfe der Spalten (table/thead/tr/td) und passende Spalteninhalte voraus.

Beispiel:

<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title>Sortierbare Tabelle</title>
  <script src = "tabsort.js" type = "text/javascript; charset=utf-8"/>
  <script type = "text/javascript">
onload = function () {tabsort_initialize ();}
  </script>
</head>
<body>
<h1>Sortierbare Taelle</h1>
<table class = "tabsort">
  <thead>
    <tr>
      <td class = "date">Datum</td>
      <td class = "text">Typ</td>
      <td class = "number">Preis</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>01.11.2010</td>
      <td>Zweirad</td>
      <td>5.034,37</td>
    </tr>
    <tr>
      <td>08.02.2011</td>
      <td>Dreirad</td>
      <td>918,20</td>
    </tr>
    <tr>
      <td>17.02.2011</td>
      <td>Einrad</td>
      <td>17.003,46</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Sortierbare Tabelle

Die Funktion tabsort_initialize macht alle Tabellen, deren Attributwert table/@class das Wort "tabsort" enthält, sortierbar, indem sie bestimmten Spaltenköpfen (table/thead/tr/td) Behandlungsfunktionen für einen "Klick" zuordnet.

Die Funktion tabsort_makesortable kann jede Tabelle sortierbar machen, aber die Funktion tabsort_initialize ist vorzuziehen.

Sortierbare Spalten

Die Zeilen einer sortierbaren Tabelle können nach dem Inhalt einer Spalte sortiert werden, wenn das Attribut table/thead/tr/td/@class eines der Wörter number, date oder text enthält.

number: In den Inhalten der Zellen der Spalte werden Punkte entfernt und Kommata durch einen Punkt ersetzt. Der so entstehende Zelleninhalt wird als Zahl (Dezimalzahl) interpretiert. Die Tabellenzeilen werden nach dem Zahlenwert sortiert.
date: Als Wert wird ein Kalenderdatum im Format "TT.MM.JJJJ" erwartet. Die Tabellenzeilen werden nach der zeitlichen Anordnung der Kalenderdaten sortiert.
text: Die Tabellenzeilen werden alfabetisch nach dem Zelleninhalt sortiert.