Суббота , 21 Октябрь 2017
Как новичку заработать в интернете?
ДомойПубликации«Табличные» манипуляции с помощью jQuery-плагинов

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

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

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

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

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

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

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

Прежде, чем продолжить, небольшое уточнение. Эти фишки отданы на откуп плагинам библиотеки 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

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

1 617
не в сети 14 часов

x64 (aka andi)

Комментарии: 2407Публикации: 325Регистрация: 02-04-2009
Так себеНеплохоХорошоЗамечательноСупер! (3 голосов, в среднем: 5,00 из 5)
Загрузка...

2 комментария

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

    Рейтинг: 2
    • Константин, вот о том же подумал: не сложно smile
      А в некоторых случаях предлагается «из коробки» очень удобная возможность. Tablesorter, к примеру, мультисортировку поддерживает. Кликнув на один столбец, можно зажать Shift и кликнуть на другой. Для маленьких таблиц это не нужно, но, допустим, в рейтинге видеокарт можно сначала нажать на столбец Производительность, затем с шифток клацнуть на Цену, тем самым дополнительно сортируя, но только в рамках одинакового быстродействия.

      Рейтинг: 1

Оставить комментарий

Ваш email не будет опубликован.Необходимы поля отмечены *

*

Добавьте изображение (jpg/gif/png)

Авторизация

Регистрация

Пароль не введен

Генерация пароля