Blog. Just Blog

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

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

Разнобой со значениями, влияющими на сортировку, решается добавлением к каждой строке таблицы набора data-атрибутов, введенных в HTML5. Вкратце, чтобы не грузить вас теорией, data-атрибуты позволяют хранить нужную вам дополнительную информацию в стандартных элементах HTML без применения хаков вроде нестандартных атрибутов, лишних DOM-свойств и т.п. Например:
  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-атрибутах отличается от содержимого ячеек, это как раз те значения, по которым должна выполняться сортировка. Если какой-либо атрибут не указан, то такие строчки будут просто перенесены в начало таблицы.

Читать статью целиком »
Просмотров: 187 | Комментариев: 1

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