Сортировка таблицы на JavaScript

Скрипты

Рисунок Сортировка таблицы на JavaScript
Сортировка таблицы на JavaScript Сортировка таблицы на JavaScript
оценка: 4.0 из 5
оценок: 39
Тема Читатели
Софт 25
Программы 75
Скрипты 60
Инструкции 10
Всего 170

Решил собрать все расширения файлов, используемых в операционной системе Windows и пришел к выводу, что таблицу из полутысячи строк будет очень сложно просматривать. Поэтому, для облегчения пользователям поиска, решил состряпать, или найти скрипт сортировки HTML таблиц. Вот именно такой скрипт мы и будем сегодня изучать.

За основу я выбрал скрипт от Стюарта Лангриджа (Stuart Langridge): sorttable.js. Этот скрипт обладает всей требуемой гибкостью, кроссбраузерностью (отключенный запуск JavaScript не входит в эту категорию) и качественным функционалом. А самое главное, это то, что на одной странице может находится много сортируемых таблиц, но при этом, вписывать скрипт требуется только один раз.

Приступим. для начала пропишем стили для таблицы. Заранее предупреждаю, скрипт обрабатывает только таблицы, в классе которых прописан 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://szenprogs.ru/scripts/sorttable.js"></script><noscript>У вас в браузере отключен запуск JavaScript сценариев. Если Вы включите эту опцию браузера, то Вы сможете производить сортировку таблиц на этой странице. Все подробности по адресу "<a href="http://szenprogs.ru/blog/2009-05-28-44" target="_blank">Сортировка таблицы на JavaScript</a>".</noscript>

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

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

Code
<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>

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

Удачи всем!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Сортировка таблицы на JavaScript
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:12099
Рейтинг:4.0/39
Дата добавления:2009-05-28 19:02, Четверг
Добавил:Szen
Теги:JavaScript, скрипт, таблица, сортировка

Мини-форум

№ 02009-05-28 19:02
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Сортировка таблицы на JavaScript".
Гость
Учавствовать в обсуждении "Сортировка таблицы на JavaScript" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Какой JavaScript фреймворк вы изпользуете?
Всего ответов: 143
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 2
Гостей: 2
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz