Сортировка строк HTML-таблицы на JavaScript
Разнобой со значениями, влияющими на сортировку, решается добавлением к каждой строке таблицы набора data-атрибутов, введенных в HTML5. Вкратце, чтобы не грузить вас теорией, data-атрибуты позволяют хранить нужную вам дополнительную информацию в стандартных элементах HTML без применения хаков вроде нестандартных атрибутов, лишних DOM-свойств и т.п. Например:
Code (HTML) : Убрать нумерацию
- <tr data-price="10" data-ident="4" data-area="32" data-dev="СуперСтрой">
- <td>менее 10 млн.</td>
- <td>без отделки</td>
- <td>32 м<sup>2</sup></td>
- <td>ООО СуперСтрой</td>
- </tr>
- <tr data-price="50" data-ident="3" data-area="62.7" data-dev="ПИК">
- <td>50.000.000</td>
- <td>черновая</td>
- <td>62.7 м<sup>2</sup></td>
- <td>ГК "ПИК"</td>
- </tr>
Для того, чтобы скрипт сортировки правильно работал, таблица должна быть оформлена с обязательным разделением на структурные элементы при помощи тегов thead и tbody:
Code (HTML) : Убрать нумерацию
- <table>
- <thead>
- <tr>
- <th>Колонка 1</th>
- <th>Колонка 2</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1.1</td>
- <td>1.2</td>
- </tr>
- <tr>
- <td>2.1</td>
- <td>2.2</td>
- </tr>
- </tbody>
- </table>
Code (JavaScript) : Убрать нумерацию
- //-----------------------------------------------------------
- // Сортировка строк таблицы
- //-----------------------------------------------------------
- // id - идентификатор таблицы
- // data - атрибут, по которому будут сортироваться строки
- // dir - направление сортировки
- // type - тип данных для нормализации
- //-----------------------------------------------------------
- function sort_rows(id, data, dir, type) {
- var tbl=document.getElementById(id);
- var tbodies=tbl.getElementsByTagName('tbody');
- var tmp_trs=tbodies[0].getElementsByTagName('tr');
- var all_trs=new Array();
- var tmp;
- // Проверить и выбрать строки для сортировки
- for (var i=0; i<tmp_trs.length; i++) {
- tmp=tmp_trs[i].getAttribute('data-'+data);
- if (tmp) {
- // Нормализованное значение для сортировки
- tmp_trs[i].sort_value=type(tmp);
- all_trs.push(tmp_trs[i]);
- }
- }
- // Сортировка массива строк по значениям
- all_trs.sort(function(a,b) {
- if (a.sort_value==b.sort_value) {
- return 0;
- }
- else {
- return (a.sort_value>b.sort_value?1:-1);
- }
- });
- // Изменить порядок сортировки
- if (dir) {
- all_trs.reverse();
- }
- // Добавить отсортированные строки обратно в таблицу
- var current_row;
- var last_row=null;
- for (i=all_trs.length-1; i>0; i--) {
- all_trs[i].parentNode.insertBefore(all_trs[i],last_row);
- last_row=all_trs[i];
- }
- }
Еще одно условие задачи: переключатели для выбора варианта сортировки могут находиться за пределами таблицы. Поэтому привязывать действие сортировки на клик по заголовку столбца, как это сделано в большинстве аналогичных скриптов, я не буду. Вместо этого в нужном месте по нужному событию вызывается функция сортировки с необходимыми параметрами. Вот пара примеров вызова:
Code (JavaScript) : Убрать нумерацию
- // Отсортировать по колонке "Цена" по возрастанию числовых значений
- sort_rows('tt','price',0,Number);
- // Отсортировать по колонке "Застройщик" по убыванию строковых значений
- sort_rows('tt','dev',1,String);
К известным недостаткам скрипта могу отнести невозможность одновременной сортировки по нескольким столбцам, но такой необходимости не возникало. В рабочих проектах все данные известны, все таблицы оформлены нужным образом, а для использования скрипта в "дикой природе" не мешало бы добавить несколько проверок на корректность структуры таблицы и типов входящих данных. И еще было бы хорошо добавить обработку строк с отсутствующими data-атрибутами, например, переносить их в конец таблицы. Повторюсь, в моем случае такой задачи не стояло, это вы можете сделать самостоятельно.
Посмотреть рабочий пример сортировки строк HTML-таблицы вы можете на демонстрационной странице.
Просмотров: 4864 | Комментариев: 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 для самих ячеек.
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 34,351 раз
Поблагодарили 34,351 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 380 |
 |
 |