FANDOM



Für Hilfe zum Einsortieren von Artikeln in Kategorien, siehe Hilfe:Kategorien.

Sortierbare Tabellen haben die Eigenschaft, Inhalte von Spalten anhand ihrer Werte sortieren zu können. Dies wird mit Hilfe der Eigenschaft class="sortable" im Tabellenquelltext umgesetzt.

Bitte beachte, dass sortierbare Tabellen für die Sortierung JavaScript nutzen und aktuell in der mobilen Ansicht nicht funktionieren.

Eine sortierbare Tabelle erstellen

Das Erstellen einer sortierbaren Tabelle ist einfach, da nur die dafür notwendige Klasse eingefügt werden muss. Dennoch kann in manchen Situationen spezifischer Code notwendig sein. Einige Spezialfälle werden daher auf dieser Seite erläutert.

Beispiel:

{| class="article-table sortable"
! Vorname
! Nachname
! Lieblingsfarbe
|-
| Ben
| Müller
| Braun
|-
| Max
| Schmidt
| Grün
|-
| Sascha
| Schmitz
| Gelb
|}


Ergibt:

Vorname Nachname Lieblingsfarbe
Ben Müller Braun
Max Schmidt Grün
Sascha Schmitz Gelb

Das Anklicken der Pfeile ermöglicht dir eine numerische und alphabetische Sortierung der Spalten. Wenn du nach mehreren Spalten sortieren willst, halte UMSHALTEN beim Anklicken der zweiten Spalte.

Fortgeschrittenes Sortieren

data-sort-type

Spalten werden standardmäßig anhand ihrer ASCII-Reihenfolge sortiert. In den meisten Fällen stellt dies kein Problem dar. Bei Sortierung von Zahlen kann diese Art der Sortierung allerdings zu Problemen führen. Die Zahlen 10, 20 und 100 würden zum Beispiel in der Reihenfolge 10 → 100 → 20 sortiert, da nach Position des ersten Zeichens sortiert wird. Dieses Problem kann durch Benutzung des Attributs „data-sort-type“ an den Spaltenüberschriften behoben werden.

data-sort-type="..." kann viele verschiedene Werte verarbeiten. Die am meisten genutzten sind:

  • text – Für Text
  • number – Für Zahlen (auch mit Punkten, Kommata, Leerzeichen, „+“ oder „-“)
  • currency – Für Zahlen mit $, £, €, oder ¥ davor (zum Beispiel: €100)
  • date – Für Daten

Beachte, dass alle Werte in den Zellen der entsprechenden Spalte dem angegeben Typ entsprechen müssen.

Beispiel:

{| class="article-table sortable"
! Standard
! data-sort-type="number" | Zahl
! data-sort-type="currency" | Währung
|-
| !@#$%
| 10
| $23
|-
| 10000
| 20
| ¥54
|-
| Apfel
| 100
| £345
|-
| Banane
| 200
| €999
|}


Ergibt:

Standard Zahl Währung
 !@#$% 10 $23
10000 20 ¥54
Apfel 100 £345
Banane 200 €999

data-sort-value

Manchmal entspricht das in einer Spalte gezeigte nicht dem, wonach du sortieren möchtest. In solchen Fällen kann data-sort-value="..." benutzt werden.

Beispiel 1:

{| class="article-table sortable"
! Konsole
! Farbe
! Anzahl
|-
| Dreamcast
| Weiß
| data-sort-value="5" | Fünf
|-
| iPad
| Weiß
| data-sort-value="0" | Null
|-
| Xbox
| Grün
| data-sort-value="8" | Acht
|}


Ergibt:

Konsole Farbe Anzahl
Dreamcast Weiß Fünf
iPad Weiß Null
Xbox Grün Acht

Beispiel 2:

{| class="article-table sortable" style="width: 500px;"
! data-sort-type="text" scope="col" |Frucht
! data-sort-type="currency" scope="col" |Durchschnittspreis ($USD)
! data-sort-type="number" scope="col" style="width:100px" |Handelswert in Äpfeln
! data-sort-type="number" scope="col" style="width:100px" |Handelswert in Zitronen
|-
|data-sort-value="Ananas"| [[file:pineappleexample.png|30px]]<br />Ananas
|$3.00
|data-sort-value="15"|[[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]]
|data-sort-value="7.5"|[[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:halflemonexample.png|10px]]
|-
|data-sort-value="Apfel"| [[file:appleexample.png|30px]]<br />Apfel
|$0.20
|data-sort-value="1"|N/A
|data-sort-value="0.5"|[[file:halflemonexample.png|10px]]
|-
|data-sort-value="Zitrone"| [[file:lemonexample.png|30px]]<br />Zitrone
|$0.40
|data-sort-value="2"|[[file:appleexample.png|20px]][[file:appleexample.png|20px]]
|data-sort-value="1"|N/A
|-
|data-sort-value="Kokosnuss"| [[file:coconutexample.png|30px]]<br />Kokosnuss
|$1.40
|data-sort-value="7"|[[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]]
|data-sort-value="3.5"|[[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:halflemonexample.png|10px]]
|}


Ergibt:

Frucht Durchschnittspreis ($USD) Handelswert in Äpfeln Handelswert in Zitronen
Pineappleexample
Ananas
$3.00 AppleexampleAppleexampleAppleexampleAppleexampleAppleexampleAppleexampleAppleexampleAppleexampleAppleexampleAppleexampleAppleexampleAppleexampleAppleexampleAppleexampleAppleexample LemonexampleLemonexampleLemonexampleLemonexampleLemonexampleLemonexampleLemonexampleHalflemonexample
Appleexample
Apfel
$0.20 N/A Halflemonexample
Lemonexample
Zitrone
$0.40 AppleexampleAppleexample N/A
Coconutexample
Kokosnuss
$1.40 AppleexampleAppleexampleAppleexampleAppleexampleAppleexampleAppleexampleAppleexample LemonexampleLemonexampleLemonexampleHalflemonexample

Datumswerte

{| class="article-table sortable"
|-
! data-sort-type="date" | Tag, Monat, Jahr
|-
| 21 Dec 1905
|-
| 17 Jan 1950
|-
| 14 May 2014
|-
| 8 Aug 1966
|}


Ergibt:

Tag, Monat, Jahr
21. Dez. 1905
17. Jan. 1950
1. Jan. 1950
14. Mai. 2014
8. Aug. 1966

Spalten von der Sortierung ausschließen

Wenn du bestimmte Spalten nicht sortierbar machen willst, kannst du dies durch Hinzufügen der Klasse „unsortable“ zu ihrer Überschrift umsetzen.

Beispiel:

{| class="article-table sortable"
|-
! Spiel
! Art
! class="unsortable" | Bewertung
|-
| Minecraft
| Sandbox
| ☆☆
|-
| League of Legends
| MOBA
| ☆☆☆
|-
| Call of Duty
| Shooter
| ☆
|}

Ergibt:

Spiel Art Bewertung
Minecraft Sandbox ☆☆
League of Legends MOBA ☆☆☆
Call of Duty Shooter

Zeilen von der Sortieung ausschließen

Wenn du eine Zeile am Ende der Tabelle von der Sortieung ausschließen willst (beispielsweise eine Ergebnis-Zeile), kannst du dies durch Hinzufügen von class="sortbottom" zu der Zeile tun.

Beispiel:

{| class="article-table sortable"
! Name
! Geschlecht
! Alter
|-
| Amanda
| Weiblich
| 18
|-
| Bill
| Männlich
| 23
|-
| Cathryn
| Männlich
| 34
|- class="sortbottom"
! colspan="2" | Durchschnitt
| 25
|}

Ergibt:

Name Geschlecht Alter
Amanda Weiblich 18
Bill Männlich 23
Cathryn Männlich 34
Durchschnitt 25

Siehe auch

Hilfe und Feedback

Nutzung von Community-Inhalten gemäß CC-BY-SA , sofern nicht anders angegeben.