«Табличные» манипуляции с помощью jQuery-плагинов

Друзья, доброго дня!

Прошлая тема мне показалась несколько неполной. С точки зрения оформления там порядок, но в больших табличках бывает удобно дать пользователю возможность автоматической сортировки данных, а в небольших — ручного упорядочивания.

Давно, когда писал свою первую «цемеэску», в админку запихнул обе возможности. Например, автоматическая сортировка полезна, когда нужно получить элементы таблицы по возрастанию идентификатора или имени. Самое главное, это делается в браузере, без дополнительных подзапросов на сервер.

При формировании страницы может быть полезно ручное упорядочивание элементов. Пусть выводится 4 блока: приветствие, последние статьи, последние новости, форма подписки. Чтобы форму и новости поставить первыми, достаточно будет перетащить соответствующие строки вверх.

Возможно, объяснил путано, но из примеров ниже будет понятно, в чём соль.

Прежде, чем продолжить, небольшое уточнение. Эти фишки отданы на откуп плагинам библиотеки jQuery — очень популярной и используемой повсеместно. Посему, помимо простейших манипуляций, доступны и более продвинутые возможности. Разбирать их не буду, просто оставлю ссылку на маны. Веб-программистам достаточно официальной документации, а начинающие просто смогут это «пощупать» на тривиальных примерах.

Пользовательская автоматическая сортировка

Для этих нужно будем пользоваться плагином Tablesorter. Переходите на страницу плагина, подраздел Download. Скачайте архив. Оттуда понадобится один файл: jquery.tablesorter.min.js

Закачайте его на свой сайт. После — подключате стандартным способом:

<script type="text/javascript" src="/путь-к-файлу/jquery.tablesorter.min.js"></script>

Если jQuery по каким-то причинам не используется, сначала нужно подключить его.

Отлично! Теперь, для подключения ко всем таблицам на странице, добавляется такой код:

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('table').tablesorter();
});
</script>

Здесь table — обычный селектор css. Если указать для таблицы идентификатор id или особый класс в аттрибуте class, можно использовать их. Такие способы даже более предпочтительны, т. к. не влияют на остальные таблички.

И последний штрих — добавить оформление. В архиве с плагином есть папка themes, в ней (на данный момент, по крайней мере) ещё 2 директории: blue и green. Залейте одну из них на свой сайт и подключите файл style.css. Пример как это работает смотрите тут.

Попробуйте покликать по заголовкам. Строки должны упорядочиваться по тому столбцу, на который нажали. Повторный клик упорядочивается «в другую сторону».

Всё ещё терзают сомнения, а нужно ли это и где может понадобиться? Тогда вот реальный пример использования плагина. Он работает, и очень удобен.

Пользовательское упорядочивание

Этот хак легко выполняется с помощью плагина tableDnD. Документация находится здесь.

Подключается так же: скачиваете файлик jquery.tablednd.js, заливаете его на свой сайт, добавляете в код страницы:

<script type="text/javascript" src="/путь-к-файлу/jquery.tablednd.js"></script>

Активация тоже очень проста:

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('table').tableDnD( { onDragClass:'DnDDragClass' } );
});
</script>

Здесь разве будет интересен параметр onDragClass. Он устанавливает для перетаскиваемой строки наш класс, в данном случае — DnDDragClass. Описание может выглядеть так:

.DnDDragClass td { background-color:#ffe !important }

Можно добавить в основной файл стилей, либо влепить между <style></style> на странице, прямо в коде.

Пример тут. Пусть не смущают классы .tablesorter, они здесь только для оформления таблицы нужны.

Заключение

Понимаю, что удобнее будет иметь эти примеры локально. Потому скачайте архив, распакуйте и спокойно изучайте в любое удобное время.

При открытии html-файлов с помощью Internet Explorer, тот взбрыкнёт и ругнётся на выполнение сценариев — ну ослик же. Смело нажимайте кнопку Разрешить заблокированное содержимое. Если страшно, просто откройте в любом нормальном браузере, этой бадяги не будет.

На этом, пожалуй, всё. Встретимся в сентябре. Или может даже ещё и в августе чуть-чуть)

Поддержка сайта

С удовольствием создаю годный контент. Буду очень признателен, если вы поддержите мои усилия:

днём интернета
шоколадкой для работы мозга
коробочкой ароматного чая для бодрости
продлением хостинга на +1 месяц

Автор публикации

2 070

не в сети 1 год

x64 (aka andi)

Комментарии: 2893Публикации: 405Регистрация: 02-04-2009

(4 голосов, в среднем: 5,00 из 5)

Загрузка...