[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: вирус  
Сортировка таблицы на JavaScript
михаилДата: Суббота, 17.10.2009, 19:10 | Сообщение # 1
Лейтенант
Группа: Пользователи
Сообщений: 40
Награды: 0
Репутация: 1
Статус: Offline
Приступим. для начала пропишем стили для таблицы. Заранее предупреждаю, скрипт обрабатывает только таблицы, в классе которых прописан sortable. На какие таблицы Вы пропишете этот класс, те и будут иметь возможность сортироваться.

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

Quote
<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 пишем вызов скрипта:

Quote
<script type="text/javascript" src="http://szenprogs.ru/scripts/sorttable.js"></script><noscript>У вас в браузере отключен запуск JavaScript сценариев. Если Вы включите эту опцию браузера, то Вы сможете производить сортировку таблиц на этой странице. Все подробности по адресу "<a href="Ссылка" target="_blank">Сортировка таблицы на JavaScript</a>".</noscript>
Собственно, основная работа проделана. При желании, вы можете разместить скрипт у себя на сервере, ссылка выше (для того, чтобы сохранить скрипт, щелкните по ссылке правой кнопкой мыши и выберите "сохранить как"). В этом случае, адрес к скрипту нужно будет поменять на свой. Но это необязательно. С нашего хоста этот скрипт удаляться не будет.

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

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

<!–- Данные таблицы -–>
<tbody>
<tr><td>Софт</td> <td>25</td></tr>
<tr><td>Программы</td> <td>75</td></tr>
<tr><td>Скрипты</td> <td>60</td></tr>
<tr><td>Инструкции</td> <td>10</td></tr>
</tbody>

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

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


Народ я у тут мало сижу так что кому я действительно интересен предлагайте друганство на другой пис по адресу : Muxaujlhunter@list.ru))))
 
  • Страница 1 из 1
  • 1
Поиск: