Решил собрать все расширения файлов, используемых в операционной системе Windows и пришел к выводу, что таблицу из полутысячи строк будет очень сложно просматривать. Поэтому, для облегчения пользователям поиска, решил состряпать, или найти скрипт сортировки HTML таблиц. Вот именно такой скрипт мы и будем сегодня изучать.
За основу я выбрал скрипт от Стюарта Лангриджа (Stuart Langridge): sorttable.js. Этот скрипт обладает всей требуемой гибкостью, кроссбраузерностью (отключенный запуск javascript не входит в эту категорию) и качественным функционалом. А самое главное, это то, что на одной странице может находится много сортируемых таблиц, но при этом, вписывать скрипт требуется только один раз.
Приступим. для начала пропишем стили для таблицы. Заранее предупреждаю, скрипт обрабатывает только таблицы, в классе которых прописан sortable. На какие таблицы Вы пропишете этот класс, те и будут иметь возможность сортироваться.
Итак, стили. Пишем их в раздел HEAD:
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 пишем вызов скрипта:
<noscript>У вас в браузере отключен запуск javascript сценариев. Если Вы включите эту опцию браузера, то Вы сможете производить сортировку таблиц на этой странице. Все подробности по адресу "<a href="http://plusoft.ru/scripts_for_ucoz/181-sortirovka-tablicy-na-javascript.html" target="_blank">Сортировка таблицы на javascript</a>".</noscript>
Собственно, основная работа проделана. При желании, вы можете разместить скрипт у себя на сервере, ссылка выше (для того, чтобы сохранить скрипт, щелкните по ссылке правой кнопкой мыши и выберите "сохранить как"). В этом случае, адрес к скрипту нужно будет поменять на свой. Но это необязательно. С нашего хоста этот скрипт удаляться не будет.
Теперь приведу пример кода таблицы. Так Вам будет легче понять, что к чему.
<!-- Заголовок таблицы -->
<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>
Для сортировки щелкните мышкой по заголовку столбца, по которому нужно сортировать. Повторный щелчек отсортирует столбец в обратную сторону.
Скачать файлы
|
Скачать с сервера: sorttable.rarРазмер: 4.17 Kb | Скачиваний: 10 |
Удачи всем!
Реализация создана на основе статьи blog.webmasterschool_ru/javascript/203/
Предыдущая статья - Информер праздников и событий на сайт
Следующая статья - Музыкальный аудио плеер на сайт - версия скрипта 1
Все категории:
Скрипты для ucoz от plusoft.ru