Sortowanie ma zdolność do sortowania wierszy tabeli bazując na wartościach wewnątrz specyficznych kolumn. Odbywa się to za pośrednictwem class="sortable".
Należy pamiętać, że sortowanie używające JavaScriptu do sortowania, może nie działać obecnie w skórce mobilnej. Jeśli chcesz, posortować według wielu kolumn, przytrzymaj klawisz Shift podczas sortowania drugiej kolumny.
Podstawy
Stworzenie sortowanej tabeli jest proste, a jedyne czego potrzebujesz to klasy "sortable". Jednak pewne sytuacje, takie jak sortowanie numerów lub za pomocą stopki tabeli, wymagają dodatkowego wkładu, jak opisano to w dalszej części strony.
{| class="article-table sortable"
!Imię
!Nazwisko
!Ulubiony kolor
|-
|Ben
|Benny
|Brązowy
|-
|John
|Smith
|Zielony
|-
|Smith
|John
|Kasztanowy
|}
powinno dać w rezultacie:
| Imię | Nazwisko | Ulubiony kolor |
|---|---|---|
| Ben | Benny | Brązowy |
| John | Smith | Zielony |
| Smith | John | Kasztanowy |
Zaawansowane sortowanie
data-sort-type
Domyślnie kolumny są sortowane według porządku znaków ASCII. Nie jest to problemem w większości przypadków, ale może być problematyczne w przypadku numerów, np. 10, 20, 100 może być sortowane jako 10, 100, 20 (sortowane jest przez pierwszą "literę", a nie przez liczbę). Można to naprawić używając atrybutu "data-sort-type" w nagłówkach kolumn.
data-sort-type="..." może zawierać wiele różnych wartości, ale najczęściej są to:
- text
- number - Oczekuje wartości liczbowych, punktów, przecinków, spacji, "+", lub "-".
- currency - Oczekuje numerów z $, £, €, lub ¥ na początku (np.: $100, ¥10000).
- date
Należy pamiętać, że jeśli żadna z komórkek w kolumnie nie ma wartości odpowiedniego typu, to jest szansa, że sortowania całej kolumny powróci do domyślnego.
Przykład:
{| class="article-table sortable"
!Domyślnie
!data-sort-type="number"|Numer
!data-sort-type="currency"|Koszt
|-
|!@#$%
|10
|$23
|-
|10000
|20
|¥54
|-
|Jabłko
|100
|£345
|-
|Banan
|200
|€999
|}
powinno dać w rezultacie:
| Domyślnie | Numer | Koszt |
|---|---|---|
| !@#$% | 10 | $23 |
| 10000 | 20 | ¥54 |
| Jabłko | 100 | £345 |
| Banan | 200 | €999 |
data-sort-value
Czasami to co chcesz zobaczyć w kolumnie nie odpowiada temu co chcesz, aby było posortowane. W takich przypadkach użyj data-sort-value="...".
Przykład:
{| class="article-table sortable"
!Konsola
!Kolor
!Seria
|-
|Dreamcast
|Biały
| data-sort-value="5"|Pięć
|-
|iPad
|Biały
| data-sort-value="0"|Zero
|-
|Xbox
|Zielony
| data-sort-value="8"|Osiem
|}
powinien dać w rezultacie:
| Konsola | Kolor | Seria |
|---|---|---|
| Dreamcast | Biały | Pięć |
| iPad | Biały | Zero |
| Xbox | Zielony | Osiem |
Nie sortowanie kolumn
Jeśli masz tabelę, w której nie chcesz, aby jedna z kolumn była sortowana, możesz dodać klasę "unsortable" do jego nagłówka
Przykład:
{| class="article-table sortable"
|-
!Gra
!Motyw
! class="unsortable" |Ocena
|-
|Pocket League Story
|piłka nożna
|☆☆
|-
|Game Dev Story
|vidya gamez
|☆☆☆
|-
|Grand Prix Story
|samochody
|☆
|}
powinien zwrócić poniższą tabelę:
| Gra | Motyw | Ocena |
|---|---|---|
| Pocket League Story | piłka nożna | ☆☆ |
| Game Dev Story | vidya gamez | ☆☆☆ |
| Grand Prix Story | samochody | ☆ |
Stopka tabeli
Jeżeli nie życzysz sobie, aby dół tabeli był sortowany (na przykład wiersz "razem"), możesz to osiągnąć poprzez dodanie class="sortbottom" w danym wierszu.
Przykład:
{| class="article-table sortable"
!Imię
!Płeć
!Wiek
|-
|Amanda
|Kobieta
|12
|-
|Bill
|Mężczyzna
|23
|-
|Cathryn
|Mężczyzna
|34
|- class="sortbottom"
!colspan="2"|Średnia
|23
|}
powinno dać w rezultacie:
| Imię | Płeć | Wiek |
|---|---|---|
| Amanda | Kobieta | 12 |
| Bill | Mężczyzna | 23 |
| Cathryn | Mężczyzna | 34 |
| Średnia | 23 | |