Сортировка таблицы на JavaScript
Скрипты
Сортировка таблицы на JavaScript| Тема | Читатели |
|---|---|
| Софт | 25 |
| Программы | 75 |
| Скрипты | 60 |
| Инструкции | 10 |
| Всего | 170 |
Решил собрать все расширения файлов, используемых в операционной системе 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 пишем вызов скрипта:
Собственно, основная работа проделана. При желании, вы можете разместить скрипт у себя на сервере, ссылка выше (для того, чтобы сохранить скрипт, щелкните по ссылке правой кнопкой мыши и выберите "сохранить как"). В этом случае, адрес к скрипту нужно будет поменять на свой. Но это необязательно. С нашего хоста этот скрипт удаляться не будет.
Теперь приведу пимер кода таблицы. Так Вам будет легче понять, что к чему.
<!–- Заголовок таблицы –->
<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>
Рабочий пример можете посмотреть выше этого текста, в самом начале поста. Для сортировки щелкните мышкой по заголовку столбца, по которому нужно сортировать. Повторный щелчек отсортирует столбец в обратную сторону.
Удачи всем!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Сортировка таблицы на JavaScript
Скрипты
Скрипты, инструкции, справочники
| Категория: | Скрипты |
| Просмотрено: | 14499 |
| Рейтинг: | 4.0/39 |
| Дата добавления: | 2009-05-28 19:02, Четверг |
| Добавил: | Szen |
| Теги: | javascript, скрипт, таблица, сортировка |
Рекомендуем
Дополнительно к Сортировка таблицы на JavaScript
Мини-форум
| № 0 | 2009-05-28 19:02 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Сортировка таблицы на JavaScript". |
| Гость |
