Электронная библиотека
Программисту веб-дизайнеру
Другие материалы
Библиотека: скачать готовые скрипты Javascript
Сортировка таблицы клиентом прямо на веб-странице при помощи Javascript
Посмотрите на работу этого фантастического скрипта на отдельной веб-странице (персональный компьютер).
При помощи приводимого ниже клиентского сценария - скрипта Javascript - выполняется сортировка любого столбца некоторой таблицы на веб-странице клиентом прямо при помощи Javascript без перезагрузки и серверных обратобок, исключительно клиентский сценарий.
Скачайте архивный файл ZIP или архив EXE (rar-распаковывающийся), распакуйте его и поместите содержимое распакованной папки в ту-же самую папку, где размещается Ваша веб-страница. Изменение кода скрипта может повлечь его неработоспособность.
Выделите мышью приводимый ниже код, скопируйте его (командой Ctrl+C) и вставьте его (командой Ctrl+V) в html-код своей веб-страницы в нужное Вам место перед таблицей.
<script language="javascript" src="tablesort.js">
</script>
Вам нужны две картинки (изображения), которые бы указывали на тип проведенной сортировки конкретного столбца - файл "0.gif" (картинка сортировки вниз) и файл "1.gif" (картинка сортировки вверх). Образцы картинок в папке "img" прилагаются в архиве и могут быть заменены Вами на любые другие с сохранением имени файла и папки.
В список классов стилей обязательно добавьте описания, параметры которых (цвет, шрифт и отступы) можно редактировать (их названия и имена редактировать категорически запрещено):
/* наша html таблица */
table.sort {
border-spacing:0.1em;
margin-bottom:1em;
margin-top:1em
}
/* ячейки таблицы */
table.sort td {
border:1px solid #CCCCCC;
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:#999999;
color:#FFFFFF
}
Так должна выглядеть сортируемая таблица. Здесь налагаются очень жесткие требования по правильности ее оформления. Все дополнительные команды, открывающие и закрывающие тэги должны присутствовать. Необходимо указать теги Thead (шапка таблицы) и Tbody (основная часть таблицы). Обычно их мало кто использует, но здесь эти теги обязательны. Шапка таблицы также обязательна в указанной форме. Можно добавлять элементы оформления, но ставить все закрывающие тэги в правильной последовательности. Обратите ОСОБОЕ внимание на код сортируемой таблицы, который можно редактировать в деталях. Внимание: регистр букв имеет значение и стили заголовков можно редактировать только через список стилей, иначе программа заглючит !!!
<table class="sort" align="center">
<thead>
<tr>
<td>Имя поля 1</td>
<td>Имя поля 2</td>
<td>Имя поля 3</td>
<td>Имя поля 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Первая запись и код строки 1</td>
<td>Вторая запись и код строки 1</td>
<td><a href="URL ссылка 1">Четвертая запись и код строки 1</a></td>
<td>Четвертая запись и код строки 1</td>
</tr>
.......
<tr>
<td>Первая запись и код строки N</td>
<td>Вторая запись и код строки N</td>
<td><a href="URL ссылка N">Четвертая запись и код строки N</a></td>
<td>Четвертая запись и код строки N</td>
</tr>
</tbody>
</table>