Сортировка таблицы на 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>
Рабочий пример можете посмотреть выше этого текста, в самом начале поста. Для сортировки щелкните мышкой по заголовку столбца, по которому нужно сортировать. Повторный щелчек отсортирует столбец в обратную сторону.
Удачи всем!
Создать закладку на материал через SzenMark| Категория: | Скрипты |
| Просмотрено: | 2475 |
| Рейтинг: | 3.4/14 |
| Дата добавления: | 28.05.2009 19:02, Четверг |
| Добавил: | Szen |
| Теги: | JavaScript, скрипт, таблица, сортировка |
Рекомендуем
Дополнительно
Внимание
Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.
Любая, полная или частичная, публикация материала, размещенного в блоге портала SzenProgs, на другом стороннем от портала SzenProgs сайте должна сопровождаться ссылкой на источник.
defaultNick5394(44), mihail300756(54), yakov(35), Бусябуся(17), Fimon307(23).
Желаем им счастья, здоровья, благополучия, любви и богатства!
С уважением, администрация сайта.
Нет уверенности в завтрашнем дне - продвижение сайта. Посетители вашего сайта здесь.
Создать бесплатно Lineage 2 сервер
картридж laserjet 1020
