Blog. Just Blog

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

Версия для печати Добавить в Избранное Отправить на E-Mail 05.12.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Понадобился скрипт для сортировки строчек HTML-таблицы в зависимости от значений столбцов. В этих ваших интернетах есть немало готовых решений, но, как часто случается на моей работе, постановка задачи включает в себя кучу дополнительных условий. Например, в ячейке таблицы может быть не просто текст, а несколько HTML-тегов, сортируемое значение может быть отформатировано особым образом или к нему могут быть дописаны какие-нибудь дополнительные данные, а то и вовсе отображаемое текстовое значение в ячейке соответствует какому-то внутреннему индексу в системе и сортировать надо именно по этому индексу. Короче, отображаемое содержимое ячеек таблицы не влияет на ожидаемый порядок их сортировки.

Разнобой со значениями, влияющими на сортировку, решается добавлением к каждой строке таблицы набора data-атрибутов, введенных в HTML5. Вкратце, чтобы не грузить вас теорией, data-атрибуты позволяют хранить нужную вам дополнительную информацию в стандартных элементах HTML без применения хаков вроде нестандартных атрибутов, лишних DOM-свойств и т.п. Например:
Code (HTML) : Убрать нумерацию
  1. <tr data-price="10" data-ident="4" data-area="32" data-dev="СуперСтрой">
  2.     <td>менее 10 млн.</td>
  3.     <td>без отделки</td>
  4.     <td>32 м<sup>2</sup></td>
  5.     <td>ООО СуперСтрой</td>
  6. </tr>
  7. <tr data-price="50" data-ident="3" data-area="62.7" data-dev="ПИК">
  8.     <td>50.000.000</td>
  9.     <td>черновая</td>
  10.     <td>62.7 м<sup>2</sup></td>
  11.     <td>ГК "ПИК"</td>
  12. </tr>
Как вы видите, содержимое в data-атрибутах отличается от содержимого ячеек, это как раз те значения, по которым должна выполняться сортировка. Если какой-либо атрибут не указан, то такие строчки будут просто перенесены в начало таблицы.

Для того, чтобы скрипт сортировки правильно работал, таблица должна быть оформлена с обязательным разделением на структурные элементы при помощи тегов thead и tbody:
Code (HTML) : Убрать нумерацию
  1. <table>
  2.   <thead>
  3.     <tr>
  4.       <th>Колонка 1</th>
  5.       <th>Колонка 2</th>
  6.     </tr>
  7.   </thead>
  8.  
  9.   <tbody>
  10.     <tr>
  11.       <td>1.1</td>
  12.       <td>1.2</td>
  13.     </tr>
  14.     <tr>
  15.       <td>2.1</td>
  16.       <td>2.2</td>
  17.     </tr>
  18.   </tbody>
  19. </table>
Теперь сам скрипт для сортировки строчек таблицы. В качестве параметров он принимает идентификатор таблицы, в которой надо произвести сортировку, название data-атрибута, по значениям которого будет выполнена сортировка, направление сортировки (0 - по возрастанию, 1 - по убыванию) и тип сортируемых данных, числовые или строковые.
Code (JavaScript) : Убрать нумерацию
  1. //-----------------------------------------------------------
  2. // Сортировка строк таблицы
  3. //-----------------------------------------------------------
  4. // id - идентификатор таблицы
  5. // data - атрибут, по которому будут сортироваться строки
  6. // dir - направление сортировки
  7. // type - тип данных для нормализации
  8. //-----------------------------------------------------------
  9. function sort_rows(id, data, dir, type) {
  10.     var tbl=document.getElementById(id);
  11.     var tbodies=tbl.getElementsByTagName('tbody');
  12.     var tmp_trs=tbodies[0].getElementsByTagName('tr');
  13.  
  14.     var all_trs=new Array();
  15.     var tmp;
  16.  
  17.     // Проверить и выбрать строки для сортировки
  18.     for (var i=0; i<tmp_trs.length; i++) {
  19.         tmp=tmp_trs[i].getAttribute('data-'+data);
  20.         if (tmp) {
  21.             // Нормализованное значение для сортировки
  22.             tmp_trs[i].sort_value=type(tmp);
  23.             all_trs.push(tmp_trs[i]);
  24.         }
  25.     }
  26.  
  27.     // Сортировка массива строк по значениям
  28.     all_trs.sort(function(a,b) {
  29.         if (a.sort_value==b.sort_value) {
  30.             return 0;
  31.         }
  32.         else {
  33.             return (a.sort_value>b.sort_value?1:-1);
  34.         }
  35.     });
  36.  
  37.     // Изменить порядок сортировки
  38.     if (dir) {
  39.         all_trs.reverse();
  40.     }
  41.  
  42.     // Добавить отсортированные строки обратно в таблицу
  43.     var current_row;
  44.     var last_row=null;
  45.     for (i=all_trs.length-1; i>0; i--) {
  46.         all_trs[i].parentNode.insertBefore(all_trs[i],last_row);
  47.         last_row=all_trs[i];
  48.     }
  49. }
Скрипт получился кроссбраузерный, довольно шустро работает во всех современных мобильных и стационарных браузерах. Старые браузеры могут ругнуться на data-атрибуты, но проблем с функционалом тоже быть не должно.

Еще одно условие задачи: переключатели для выбора варианта сортировки могут находиться за пределами таблицы. Поэтому привязывать действие сортировки на клик по заголовку столбца, как это сделано в большинстве аналогичных скриптов, я не буду. Вместо этого в нужном месте по нужному событию вызывается функция сортировки с необходимыми параметрами. Вот пара примеров вызова:
Code (JavaScript) : Убрать нумерацию
  1. // Отсортировать по колонке "Цена" по возрастанию числовых значений
  2. sort_rows('tt','price',0,Number);
  3.  
  4. // Отсортировать по колонке "Застройщик" по убыванию строковых значений
  5. sort_rows('tt','dev',1,String);
В тестовом примере эти обработчики добавлены к стрелочкам в заголовки колонок. На реальных проектах они могут быть привязаны к любому другому элементу страницы.

К известным недостаткам скрипта могу отнести невозможность одновременной сортировки по нескольким столбцам, но такой необходимости не возникало. В рабочих проектах все данные известны, все таблицы оформлены нужным образом, а для использования скрипта в "дикой природе" не мешало бы добавить несколько проверок на корректность структуры таблицы и типов входящих данных. И еще было бы хорошо добавить обработку строк с отсутствующими data-атрибутами, например, переносить их в конец таблицы. Повторюсь, в моем случае такой задачи не стояло, это вы можете сделать самостоятельно.

Посмотреть рабочий пример сортировки строк HTML-таблицы вы можете на демонстрационной странице.

Поделиться ссылкой ВКонтакте
Просмотров: 5105 | Комментариев: 7

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
ManHunter (09.03.2020 в 16:54):
Так в чем проблема взять и дописать весь нужный функционал?
izhadapter (09.03.2020 в 10:37):
Спасибо.
Хорошо бы куки еще учитывать чтоб сохранялась сортировка при перезагрузке страницы
ipSlicer (26.01.2019 в 06:13):
Что-то я не увидел #кодсократилсявразы на vie, но вот демонстрационная табличка показательная. Да. Польза от vie только для программиста, а как начнешь спрашивать, что реально можно посмотреть на vie кроме эффектных демонстраций, так сразу начинают мяться и рассуждать о скорости работы с виртуальным DOM. :) Мода на фреймворк пройдет, а javascript останется.
DiPrm (27.12.2018 в 00:19):
Да, вес скрипта увеличился, но логика упростилась, удобнее воспринимается. Но польза от этого только для программиста)
ManHunter (25.12.2018 в 22:34):
DiPrm, ай, лукавишь. "В разы" будет, когда не будет строчки <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js& quot;>
А так к своим разам прибавляй-умножай размер фреймворка.
DiPrm (25.12.2018 в 22:12):
Попробовал реализовать решение на vue js, код сократился в разы: https://codepen.io/earthwalker/pen/jeVbRm
DiPrm (07.12.2018 в 21:05):
Спасибо! Что-то подобное делал для таблицы, в ячейках которой нужно было показать числа с разбивкой, поэтому для сортировки использовал атрибут data для самих ячеек.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (32), AJAX (5), Assembler (371), COM (42), CSS (44), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (53), iconBIT (4), JavaScript (76), MySQL (13), Nikon (19), PDF (10), PHP (122), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (20), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (126), выпечка (30), выставки (120), генератор ПСЧ (10), графика (121), десерты (31), Египет (9), заготовки на зиму (47), закуска (22), закуска к пиву (25), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (322), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (69), мониторы (6), музеи (78), мультимедиа (82), мясо (62), напитки (14), ноутбуки (8), обфускация (7), окна (71), оформление сайта (51), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (131), полезные функции (42), прохождения (4), процессы (25), птица (22), путешествия (26), распаковка (22), реверсинг (52), регулярные выражения (5), рыба (35), салаты (19), сброс триала (4), сеть (37), система (178), Сокольники (8), соусы (15), супы (14), телефоны (10), Тунис (6), умный дом (14), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (17), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 35,665 раз
<< 2024 - ДЕКАБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
            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          
День добровольца (волонтера)
День начала контрнаступления советских войск под Москвой
День онлайн-предпринимателя
День ниндзя
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0029 сек.) / Память: 4.5 Mb
Наверх