FANDOM


Таблиці з сортуванням дозволяють упорядковувати дані по стовпцях в порядку зростання або зменшення. Щоб додати клавіши сортування, в режимі вихідного коду надайте таблиці class="sortable".

На даний момент сортування не працює в мобільному скіні. Якщо ви хочете відсортувати дані по декількох стовпцях таблиці, клікайте по колонках, натиснувши клавішу Shift.

Основи Редагувати

Щоб зробити таблицю сортованою, досить привласнити їй клас «sortable» або дописати цей клас через пробіл до вже зазначеної. У цьому випадку всі стовпці таблиці можна буде впорядкувати.

Приклад:

{| class="article-table sortable"
! Ім'я
! Прізвище
! Улюблений колір
|-
|Антон
|Іванов
|Коричневий
|-
|Анатолій
|Петров
|Зелений
|-
|Олексій
|Сидоров
|Бордовий
|}


В результаті:

Ім'я Прізвище Улюблений колір
Антон Іванов Коричневий
Анатолій Петров Зелений
Олексій Сидоров Бордовий


Параметри сортування Редагувати

Data-sort-type Редагувати

За замовчуванням дані в шпальтах упорядковано таблицею ASCII. Це не проблема в більшості випадків, але є й винятки. Наприклад, числа будуть впорядковані не по чисельним значенням, а за порядковим номером символу (числа 10, 20 і 100 будуть впорядковані як 10, 100, 20). Ця проблема легко вирішується присвоєнням окремого класу даним, що сортуються, в головному осередку шпальти.

data-sort-type="..." може мати різні значення, нижче перераховані найпоширеніші з них:

  • Text - упорядковує текст в алфавітному порядку.
  • Number - враховує числове значення, перший елемент може бути цифрою, комою, крапкою, прогалиною, «-» або «+».
  • Currency - валюта, елемент повинен починатися з символу валюти $, £, €, або ¥ без пробілів (наприклад: $ 100, ¥ 10000).
  • Date - дата.
  • Time - час.

Потрібно зауважити, що якщо хоча б одне значення не підходить під зазначений тип, то вся колонка буде відсортована за таблицею ASCII.

Приклад:

{| class="article-table sortable"
! Default
! Data-sort-type="number"|Number
! Data-sort-type="currency"|Currency
|-|! @ # $%
|10
|$ 23
|-|10000
|20
|¥ 54
|-|Яблуко
|100
|£ 345
|-|Банан
|200
|€ 999
|}


В результаті отримуємо різне сортування в залежності від типу даних:

Default Number Currency
10 $ 23
20 ¥ 54
100 £ 345
200 € 999

Data-sort-value Редагувати

Іноді записане значення в колонці не відповідає тому, як воно повинно бути впорядковано. У цьому випадку можна використовувати код data-sort-value="...".

Приклад:

{| class="article-table sortable"
! Консоль
! Колір
! Кількість
|-|Dreamcast
|Білий
| Data-sort-value="5"|П'ять
|-|IPad
|Білий
| Data-sort-value="0"|Нуль
|-|Xbox
|Зелений
| Data-sort-value="8"|Вісім
|}


В результаті:

Консоль Колір Кількість
Білий П'ять
Білий Нуль
Зелений Вісім

Колонки, яким не потрібне сортування Редагувати

Якщо в таблиці є колонка, значення в якій не потрібно сортувати, додайте в заголовку стовпця class="unsortable".

Приклад:  {| class="article-table sortable"  |-  !Гра  !Тема  ! class="unsortable" |Рейтинг  |-  |Pocket League Story  |футбол  |☆☆  |-  |Game Dev Story  |симулятор  |☆☆☆  |-  |Grand Prix Story  |машини  |☆  |}


В результаті:

Тема Рейтинг
Pocket League Story Футбол ☆☆
Game Dev Story Симулятор ☆☆☆
Grand Prix Story Машини

Нижній рядок таблиці Редагувати

Якщо у Вашій таблиці є нижній рядок, який містить висновок, середнє значення або з якоїсь іншої причини цей рядок не повинен брати участь у сортуванні, додайте до цього рядка клас class="sortbottom".

Приклад:

{| class="article-table sortable"
! Ім'я
! Стать
! Вік
|-|Яна
|Жінка
|12
|-
|Петро
|Чоловік
|23
|-
|Катерина
|Жінка
|34
|- Class="sortbottom"
! Colspan="2"|Середній
|23
|}


В результаті отримаємо:

Ім'я Стать Вік
Яна Жінка 12
Петро Чоловік 23
Катерина Жінка 34
Середній 23
Community content is available under CC-BY-SA unless otherwise noted.