Сортировка HTML-таблицы на JavaScript

Задача. Необходимо сделать возможным сортировку 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%
Пример №1: Таблица с с возможностью сортировать

JavaScript-библиотека для сортировки HTML-таблиц

Для сортировки таблицы можно использовать библиотеку tablesort.js. Она не сложная и без jQuery. Там же, на официальном сайте можно и посмотреть как настраивать.

В Коде №1 показано как подключить tablesort.js и заставить работать на таблице из Примера №1:

Код №1: Подключение библиотеки tablesort.js для сортировки HTML-таблицы
Пояснения к Коду №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-скриптом. Есть интересные решения, такие как прогресс-бар, пагинация и пр., но такой способ не всегда уместен.

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии