Библиотека: скачать готовые скрипты 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>

   Примечание. Удобная текстовая ссылка для форумов, блогов, цитирования материалов веб-сайта, код html можно скопировать и просто вставить в Ваши веб-страницы при цитировании материалов нашего веб-сайта. Материал носит неофициальный характер и приведен для ознакомления.