Sortierbare Tabelle
Kurzanleitung:
- Sie legen Ihre Tabelle ganz normal über den Editor an
- Sie fügen unten stehenden Code vor <tbody> ein
- Sie passen die Titel und die Filter entsprechend Ihren Anforderungen ein
1. Die Tabelle
Sie können Ihre Tabelle ganz normal über den TinyMCE-Editor erstellen, indem Sie das entsprechende Symbol, wie im nebenstehenden Bild abgebildet, anklicken. Die gewünschte Tabellengröße lässt sich dann intuitiv auswählen.
Über Punkt "Table properties" können Sie die Ausmaße einer bereits existierenden Tabelle anpassen. Über die Untermenüpunkte "Cell", "Row" und "Column" lassen sich die Einstellungen für Zellen, Zeilen und Spalten aufrufen. Hier kann man auch neue Tabellenzeilen- und spalten hinzufügen.
Achten Sie dabei darauf, dass Sie die Titelreihe nicht mit einberechnen, die werden Sie später erstellen.
2. Der Code
Da Sie sich für die sortierbare Tabelle entschieden haben, müssen Sie folgenden Code im Quelltext-Modus eingeben. Den Quelltext-Modus erreichen Sie über einen Klick auf folgenden Button:
Es öffnet sich ein weiteres Fenster, dass Ihren eingegebenen Hauptinhalt ausgibt. Nun müssen Sie den Anfang der Tabelle suchen, der, wenn Sie die Tabelle mit dem TinyMCE-Editor angelegt haben, wie folgt aussehen sollte:
Wichtig ist hier das <table>. Wenn Sie diesen Teil identifiziert haben, markieren Sie ihn, aber nicht die folgende Zeile (<tbody>), und ersetzen Sie ihn durch folgenden Code:
<table class="sort" border="1">
<thead>
<tr><th class="abc" data-table="spreadsheet">Spalte 1</th><th data-table="spreadsheet">Spalte 2</th><th data-table="spreadsheet">Spalte 3</th><th data-table="spreadsheet">Spalte 4</th><th class="num" data-table="spreadsheet">Spalte 5</th></tr>
</thead>
Dieser Code setzt die Klasse fest und erzeugt die Kopfzeile, die fünf Spalten hat. In der Kopfzeile werden die Filter und Sortiermöglichkeiten eingestellt. Die Spalten sind jeweils nach dem Wert sortierbar, sowie nach weiteren Kriterien. Obiges Beispiel liefert folgende Sortiermöglichkeiten:
- Spalte 1: Filterung per Buchstabenfilter (abc) , und sortierbar nach Wert (von A-Z)
- Spalte 2: Nur nach Wert sortierbar (von A-Z)
- Spalte 3: Nur nach Wert sortierbar (von A-Z)
- Spalte 4: Nur nach Wert sortierbar (von A-Z)
- Spalte 5: Nur nach Wert sortierbar (numerisch, aufsteigend)
Sollten Sie weniger Spalten benötigen, reduzieren Sie einfach die Anzahl der <th>.
Eine fertige Tabelle könnte dann so aussehen:
2.1 Erklärung des Codes
Code | Bedeutung |
---|---|
<table class="sort" border="1"> | Definiert, dass nun eine Tabelle erstellt wird, mit der Klasse sort (notwendig für die Sortierfunktionen) und, dass diese Tabelle einen Rahmen der Größe 1px haben soll. |
<thead> ...</thead> | Definiert die Kopfzeile der Tabelle. In dieser Kopfzeile müssen die Filter und Namen pro Zelle definiert werden. |
<tr>...</tr> | Setzt fest, dass nun eine Zeile der Tabelle beginnt. (tr = table row) |
<th class="abc" data-table="spreadsheet">Studiengang</th> |
Nun wird es interessant: <th class = "abc" definiert, dass jetzt eine Kopfzelle beginnt, der die Klasse abc zugewiesen wird. Die Klasse setzt fest, dass aus dieser Zeile die Anfangsbuchstaben der Werte pro Zelle einen Buchstaben-Filter generieren . Weitere Klassen sind:
Wenn Sie keinen zusätzlichen Filter verwenden möchten, können Sie anstelle von <th class="... folgendes für die Spalte nutzen: <th data-table="spreadsheet">Name</th> |
<tbody>...</tbody> | Definiert, dass jetzt der Inhalt der Tabelle anfängt. Die folgenden Tags müssen sich innerhalb des Body-Tags befinden. |
<tr>...</tr> | S.o. Definiert, dass jetzt eine Zeile anfängt, diesmal nicht als Header, sondern als Inhalt. |
<td>...</td> | td steht für table data, bedeutet also, dass jetzt eine Datenzelle befüllt wird, und zwar mit dem Inhalt zwischen dem Eröffnungstag (<td>) und dem schließenden Tag (</td>). Bei jeder Zeile müssen Sie so für jede Spalte einen <td>Wert</td> haben. |
</tbody> | Falls noch nicht vorhanden, müssen Sie den schließenden Tag wieder nutzen, um zu signalisieren, dass der Body abgeschlossen ist. |
</table> | Auch der table-Tag bedarf eines abschließenden Tags. Diesen müssen Sie ganz ans Ende setzen. |
Es gibt auch noch die Möglichkeit über die Klasse "html filter" ein Dropdown-Menü zu erstellen, das mit den Werten aus der Spalte befüllt wird.