Community-Wiki

Achtung: Fandom stellt ab dem 31.12.2023 bis auf Weiteres den Support für die deutsche Sprache ein. Nach diesem Datum müssen alle Anfragen im englischen Community Central oder über das Kontaktformular gestellt werden.

MEHR ERFAHREN

Community-Wiki
Advertisement
Community-Wiki

Coding

Wiki-Code

Der folgende Text betrifft das Schreiben von Wiki-Syntax, die in einem Quelltexteditor eingegeben werden muss.

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 UMSCHALTEN 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. Dez. 1905
|-
| 17. Jan. 1950
|-
| 1. Jan. 1950
|-
| 14. Mai. 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 Sortierung ausschließen[]

Wenn du eine Zeile am Ende der Tabelle von der Sortierung 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[]

Advertisement