Таблицы с сортировкой позволяют упорядочивать данные по столбцам в порядке возрастания или убывания. Чтобы добавить кнопки сортировки, в режиме исходного кода присвойте таблице 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"
!Наименование
!data-sort-type="number"|Количество
!data-sort-type="currency"|Валюта
|-
|!@#$%
|10
|$23
|-
|10000
|20
|¥54
|-
|Яблоко
|100
|£345
|-
|Банан
|200
|€999
|}
В результате получаем различную сортировку в зависимости от типа данных:
| Наименование | Количество | Валюта |
|---|---|---|
| !@#$% | 10 | $23 |
| 10000 | 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"|Восемь
|}
В результате:
| Консоль | Цвет | Количество |
|---|---|---|
| Dreamcast | Белый | Пять |
| iPad | Белый | Ноль |
| Xbox | Зелёный | Восемь |
Колонки, которым не требуется сортировка[]
Если в таблице есть колонка, значения в которой не нужно сортировать, добавьте в заголовке столбца 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 | |