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 |