Centrum Społeczności
Advertisement

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

Zobacz również[]

Advertisement