Сортировка данных таблицы
Сортировка данных таблицы на веб-странице с помощью JavaScript
При помощи данного скрипта можно производить сортировку данных таблицы (в столбце) на веб-странице, без перезагрузки страницы и серверных обработок. Полностью клиентский скрипт. Скачайте архивный файл ZIP, распакуйте его и поместите содержимое распакованной папки в ту же папку, где размещается ваша веб-страница.
Внимание! Изменение кода скрипта может повлечь его неработоспособность!
Скопируйте приведённый ниже на странице код и вставьте перед кодом таблицы на веб-странице (обычно между <head> и </head>, хотя можно и между <body> и </body> - но только ПЕРЕД таблицей с данными).
Подключение внешнего скрипта
<script src="tablesort.js"></script>
Также нужны две картинки (изображения) в виде стрелок, которые бы указывали на тип проведенной сортировки конкретного столбца — файл "arrowdown.gif" (картинка сортировки вниз) и файл "arrowup.gif" (картинка сортировки вверх). Образцы картинок в папке "img" прилагаются в архиве и могут быть заменены Вами на любые другие с сохранением имени файла и папки.
В список классов стилей обязательно добавьте описания, параметры которых (цвет, шрифт и отступы) можно редактировать (но их названия редактировать нельзя!):
Код таблицы стилей:
/* Код таблицы стилей */
table.sort {
border-spacing:0.1em;
margin-bottom:1em;
margin-top:1em
}
/* ячейки таблицы */
table.sort td {
border:1px solid #ccc;
padding:0.3em 1em
}
/* заголовки таблицы */
table.sort thead td {
cursor:pointer;
cursor:hand;
font-weight:bold;
text-align:center;
vertical-align:middle
}
/* заголовок отсортированного столбца */
table.sort thead td.curcol {
background-color:#999;
color:#fff
}
Так должна выглядеть сортируемая таблица. Здесь налагаются очень жесткие требования по правильности её оформления. Все дополнительные команды, открывающие и закрывающие теги должны присутствовать. Необходимо указать теги <thead> (шапка таблицы) и <tbody> (основная часть таблицы). Обычно их мало кто использует, но здесь эти теги обязательны! Шапка таблицы также обязательна в указанной форме.
Можно добавлять элементы оформления, но ставить все закрывающие теги в правильной последовательности. Обратите ОСОБОЕ внимание на код сортируемой таблицы, который можно редактировать в деталях. Внимание: регистр букв имеет значение и стили заголовков можно редактировать только через список стилей, иначе скрипт не будет работать!!!
Код таблицы с данными
<table class="sort" style="margin: auto; width:100%;">
<thead>
<tr>
<td>Имя поля 1<td>
<td>Имя поля 2</td>
<td>Имя поля 3</td>
<td>Имя поля 4</td>
<td>Имя поля 5</td>
</tr>
</thead>
<tbody>
<tr>
<td>Кузьменко Иван Кузьмич</td>
<td>студент ХПИ</td>
<td><a href="#">название сайта<a><td>
<td>1984 г. рожд.<td>
<td>мужск.</td>
</tr>
<tr>
<td>Зеленский Владимир Александрович</td>
<td>безработный</td>
<td><a href="#">название сайта</a></td>
<td>1978 г. рожд.</td>
<td>мужск.</td>
</tr>
<tr>
<td>Сидоров Сидор Сидорович</td>
<td>безработный</td>
<td><a href="#">название сайта</a></td>
<td>1899 г. рожд.</td>
<td>мужск.</td>
</tr>
<tr>
<td>Александрова Александра Александровна</td>
<td>ребенок</td>
<td>нет сайта</td>
<td>2020 г. рожд.</td>
<td>женск.</td>
</tr>
<tr>
<td>Шимпанзе Путинка</td>
<td>обезьяна</td>
<td>зоопарк</td>
<td>1950 г. рожд.</td>
<td>ХЛО</td>
</tr>
</tbody>
</table>
Результат:
Нажмите на шапку любого столбца, и он будет отсортирован.
| Имя поля 1 | Имя поля 2 | Имя поля 3 | Имя поля 4 | Имя поля 5 |
| Кузьменко Иван Кузьмич | студент ХПИ | Білокуракинський портал | 1984 г. рожд. | мужск. |
| Зеленский Владимир Александрович | безработный | president.gov.ua | 1978 г. рожд. | мужск. |
| Сидоров Сидор Сидорович | безработный | Microsoft.com | 1899 г. рожд. | мужск. |
| Александрова Александра Александровна | ребенок | нет сайта | 2020 г. рожд. | женск. |
| Шимпанзе Путинка | обезьяна | зоопарк | 1950 г. рожд. | ХЛО |
