Таблицы с сортировкой позволяют упорядочивать данные по столбцам в порядке возрастания или убывания. Чтобы добавить кнопки сортировки, в режиме исходного кода присвойте таблице 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 | |