Заработай rub!
Главная | Каталог статей | Регистрация | Вход
 
Суббота, 27.04.2024, 06:02
Приветствую Вас Гость | RSS
Меню сайта
Рекламка ТАК
Рекламка WMlink
Форма входа
Главная » Статьи » Мои статьи

Скрипт сортировки.

Приступим. для начала пропишем стили для таблицы. Заранее предупреждаю, скрипт обрабатывает только таблицы, в классе которых прописан sortable. На какие таблицы Вы пропишете этот класс, те и будут иметь возможность сортироваться.

Итак, стили. Пишем их в раздел HEAD.

Code

<style type="text/css">
  table
.sortable{border:0; padding:0; margin:0;}
  table
.sortable td{padding:4px; width:120px;}
  table
.sortable thead th{padding:4px;background:#D5F0FF; text-align:left;}
  table
.sortable tfoot td{font-weight:bold; border-top:1px solid #D5F0FF;}
</style>

Вы можете настроить внешний вид на ваше усмотрение. Я же настроил именно так.

Далее, где нибудь в разделе BODY пишем вызов скрипта:

Code
<script type="text/javascript"src="http://zarabotayrub.ucoz.ru/Script/sorttable.js"></script><noscript>У вас в браузере отключен запуск JavaScript сценариев. Если Вы включите эту опцию браузера, то Вы сможете производить сортировку таблиц на этой странице.</noscript>

Собственно, основная работа проделана. При желании, вы можете разместить скрипт у себя на сервере. Но это необязательно. С нашего хоста этот скрипт удаляться не будет.

Теперь приведу пимер кода таблицы. Так Вам будет легче понять, что к чему.

Code

 
<table class="sortable">
   <!–- Заголовок таблицы –->
   
<thead>
     
<tr><th>Чего</th> <th>Сколько</th></tr>
   
</thead>

   <!–- Данные таблицы -–>
   
<tbody>
     
<tr><td>Мухи</td> <td>10</td></tr>
     
<tr><td>Варенье</td> <td>13</td></tr>
     
<tr><td>Слоны</td> <td>2</td></tr>
     
<tr><td>Моськи</td> <td>4</td></tr>
   
</tbody>

   <!–- Итоги таблицы -–>
   
<tfoot>
     
<tr><td>Всего</td> <td>29</td></tr>
   
</tfoot>
 
</table>

Рабочий пример можете посмотреть на главной странице. Для сортировки щелкните мышкой по заголовку столбца, по которому нужно сортировать. Повторный щелчок отсортирует столбец в обратную сторону.

Успеха Вам!

Вот реализация примера из статьи (покликайте на заголовках).

Чего Сколько
Мухи 10
Варенье 13
Слоны 2
Моськи 4
Всего 29
Категория: Мои статьи | Добавил: Zaza (03.01.2012)
Просмотров: 1666 | Рейтинг: 0.0/0
Всего комментариев: 0
Поиск
Рекламка Links-WM
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Copyright MyCorp © 2024