Задача. Необходимо сделать возможным сортировку HTML-таблицы по столбцам.
| № | Продукты | Содержание в 100 г | % от потребности |
|---|---|---|---|
| 1 | Овощи | ||
| 1.1 | Базилик (зелень) | 3.2 г | 4% |
| 1.2 | Баклажан | 1.2 г | 1.5% |
| 2 | Соки фруктовые и овощные | ||
| 2.1 | Абрикосовый сок | 0.5 г | 0.6% |
| 2.2 | Ананасовый сок | 0.3 г | 0.4% |
| 2.3 | Апельсиновый сок | 0.7 г | 0.9% |
| 2.4 | Виноградный сок | 0.3 г | 0.4% |
| 2.5 | Вишнёвый сок | 0.7 г | 0.9% |
| 2.6 | Гранатовый сок | 0.3 г | 0.4% |
| 2.7 | Грейпфрутовый сок | 0.3 г | 0.4% |
JavaScript-библиотека для сортировки HTML-таблиц
Для сортировки таблицы можно использовать библиотеку tablesort.js. Она не сложная и без jQuery. Там же, на официальном сайте можно и посмотреть как настраивать.
Если официальный сайт будет недоступен, то вот ссылка на архив tablesort.js.
В Коде №1 показано как подключить tablesort.js и заставить работать на таблице из Примера №1:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!-- Стили библиотеки для отображения стрелки-индикатора --> <link rel="stylesheet" href="/wp-content/themes/neve-child/css/tablesort.css" type="text/css" media="all"> <!-- Таблица --> <table id="tbl-substances"> <thead> <tr> <th>№</th> <th>Продукты</th> <th data-sort-method="number">Содержание в 100 г</th> <!-- Указываем, что столбец нужно сортировать как число --> <th data-sort-method="number">% от потребности</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="2">Овощи</td> </tr> <tr> <td>1.1</td> <td>Базилик (зелень)</td> <td data-sort="3.2">3.2 г</td> <!-- Лучше указать значение в параметре data-sort --> <td>4%</td> </tr> <tr> <td>1.2</td> <td>Баклажан</td> <td data-sort="1.2">1.2 г</td> <td>1.5%</td> </tr> <tr> <td>2</td> <td colspan="2">Соки фруктовые и овощные</td> </tr> <tr> <td>2.1</td> <td>Абрикосовый сок</td> <td data-sort="0.5">0.5 г</td> <td>0.6%</td> </tr> <tr> <td>2.2</td> <td>Ананасовый сок</td> <td data-sort="0.3">0.3 г</td> <td>0.4%</td> </tr> <tr> <td>2.3</td> <td>Апельсиновый сок</td> <td data-sort="0.7">0.7 г</td> <td>0.9%</td> </tr> <tr> <td>2.4</td> <td>Виноградный сок</td> <td data-sort="0.3">0.3 г</td> <td>0.4%</td> </tr> <tr> <td>2.5</td> <td>Вишнёвый сок</td> <td data-sort="0.7">0.7 г</td> <td>0.9%</td> </tr> <tr> <td>2.6</td> <td>Гранатовый сок</td> <td data-sort="0.3">0.3 г</td> <td>0.4%</td> </tr> <tr> <td>2.7</td> <td>Грейпфрутовый сок</td> <td data-sort="0.3">0.3 г</td> <td>0.4%</td> </tr> </tbody> </table> <!-- Подключение библиотеки --> <script src='/wp-content/themes/neve-child/js/tablesort.min.js'></script> <script src='/wp-content/themes/neve-child/js/tablesort.date.js'></script> <!-- Инициализация объекта для таблицы --> <script> new Tablesort(document.getElementById('tbl-substances')); </script> |
Пояснения к Коду №1:
tablesort.css — стили для того чтобы изменялся курсор при наведении на заголовки таблицы и индикатор-стрелка. Можно просто скопировать из файла стили и вставить в свои стили.data-sort-method="number" — этим параметром указывается метод сортировки, какой тип данных сортируем.data-sort="3.2" — иногда текст внутри ячеек не нормализуется, поэтому лучше добавить значения еще через этот атрибут.new Tablesort(document.getElementById('tbl-substances')) — создание объекта таблицы, т.е. подключаем javascript к html-таблице, где 'tbl-substances' это id таблицы (дожно быть уникальным).
tabulator.info — еще одна библиотека, но здесь html-таблица полность формируется JavaScript-скриптом. Есть интересные решения, такие как прогресс-бар, пагинация и пр., но такой способ не всегда уместен.