—»     —»   FooTable: jQuery-плагин для адаптивных таблиц данных
  Раздел: Скрипты и коды   Комментариев: 4  

FooTable: jQuery-плагин для адаптивных таблиц данных



Предлагаем вам пост от Brad Vincent, в котором он представляет свой новый JQuery-плагин, который помогает нам в создании адаптивных таблиц данных. Адаптивные таблицы данных обсуждаются уже довольно давно. Нам показалось, что этот новый подход с помощью jQuery-плагина стоит обсудить по нескольким причинам: многие люди используют гибкие плагины, и не имеют единого решения, здесь используется немного другой подход с точки зрения пользовательского интерфейса, отличный от тех, что нам попадались ранее, и здесь весь функционал управляется при помощи JS (CSS используется только для стилизации).

Сегодня все пытаются запрыгнуть в вагон адаптивного дизайна. Кроме самого дизайна все остальное тоже становится адаптивным: слайдеры, лайтбоксы, галереи, можно продолжать бесконечно! Но однажды, работая над HTML-таблицей со множеством колонок, я задался вопросом о том, как это будет смотреться на моем iPhone? И затем я произвел поиск по ключу responsive tables, и наткнулся на подборку от Криса.

Зачем создавался FooTable?

До этого существовало несколько решений по созданию адаптивных таблиц данных, включая:

1. Zurb, который позволяет прокручивать таблицы горизонтально на маленьких устройствах.
2. Подход Dave Bushell, который выносит таблицу в сторону.
3. Решение от Filament Groups, которое позволяет пользователю выбирать колонки для отображения.
4. Подход Stewart Curry, в рамках которого скрываются наименее важные колонки.
5. Подход Chris Coyier, который позволяет группировать данные из каждой строки в список, и скрыть колонки.

Мне нравится то, что делают некоторые решения для организации адаптивных таблиц, но ни одно из решений не «зацепило» меня. Так что, я решил скооперироваться с моим другом-гуру jQuery Стивом, и мы занялись разработкой нового jQuery-плагина. Нам понравилась идея со скрывающимися колонками, но нам все еще нужна была возможность видеть данные. Нам также понравился подход Криса, который превращал колонки в строки, поэтому мы решили совместить два этих концепта, и так появился FooTable.

Как работает FooTable?

FooTable работает очень просто:

* Он скрывает конкретные колонки данных при разных разрешениях (мы называем это breakpoint).
* У строк появляется возможность расширяться для отображения скрытых данных.

FooTable: jQuery-плагин для адаптивных таблиц данных

Настройка посредством атрибутов данных

Стив и я работали и над другими табличными плагинами, вроде datatables.net, но мы обнаружили, что они оказались довольно сложными и вряд ли кто-то смог бы настроить их интуитивно. Так что мы пришли к идее с использованием атрибутов данных, чтобы сообщать FooTable, как и что нужно делать. Это также упрощает другим разработчикам возможность понять код, над которым вы работаете. Для примера ознакомьтесь со следующим отрывком кода, предназначенным для разметки шапки:

<table class="footable" data-filter="#filter">
<thead>
<tr>
<th data-sort-initial="descending" data-class="expand">
First Name
</th>
<th data-sort-ignore="true">
Last Name
</th>
<th data-hide="phone,tablet">
Job Title
</th>
<th data-hide="phone,tablet" data-type="numeric">
DOB
</th>
<th data-hide="phone" data-type="numeric">
Status
</th>
</tr>
</thead>

...

</table>

Вы можете без труда сказать, просто видя разметку, что таблица будет работать следующим образом:

1. Таблица будет отфильтрована при помощи id "filter" (data-filter="#filter")
2. Таблица будет изначально отсортирована по колонке First Name, и будет отображаться в нисходящей очереди (data-sort-initial="descending")
3. Колонка Last Name не может подвергаться сортировке (data-sort-ignore="true")
4. Колонки Job Title и DOB будут скрыты на телефонах и планшетах (data-hide="phone,tablet")
5. Колонка Status будет скрыта на телефонах (data-hide="phone")
6. Колонки DOB и Status использует цифровые данные (data-type="numeric").

Теперь это больше похоже на то, что нам нужно!

Заметка редактора: использование атрибутов data-* для управления поведением плагина сейчас очень распространено (Twitter Bootstrap). Хотелось бы услышать какие-нибудь предложения и мнения на этот счет.

Применение

Вы видели разметку, которая представляет собой саму таблицу, только с дополнительными настройками.

Вам также понадобится jQuery, сам плагин, и код для запуска плагина. Нижеприведенный код используется только для демонстрации того, как это все работает. В процессе разработки вы будете использовать все эти скрипты.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="js/footable-0.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('table').footable();
});
</script>

Вероятнее всего, у вас также будут и собственные breakpoint’ы. Все это очень просто настроить.

$('table').footable({
breakpoints: {
mamaBear: 1200,
babyBear: 600
}
});

Затем вы можете использовать эти значения в атрибутах data-hide.

Разработан с учетом дальнейшего расширения

Еще одно отличное свойство FooTable заключается в том, каким образом вы можете его расширить. Мы решили не раздувать код самого ядра, так как хотим добавлять и добавлять новые свойства. К тому же, у каждого проекта свои требования, и мы понимаем, что вам иногда не понадобятся все функции FooTable. Поэтому Стив предложил отличный архитектурный плагин внутри нашего же плагина, который позволяет вам без труда расширять FooTable. Например, для того, чтобы таблицы можно было сортировать, все что вам нужно будет сделать, это включить footable.sortable.js. Мы только что выпустили дополнение с сортировкой по дате, но сейчас мы немного заняты фильтрующим дополнением, и надеемся создать еще несколько полезных дополнений. Мы также надеемся, что сообщество поможет нам в этом нелегком деле, и предложит по-настоящему отличные дополнения. Вы можете ознакомиться с кодом нашего шаблона здесь.

Последнее, но не менее важное – демо!

* Здесь вы можете найти все демо с простым в использовании переключателем размера окна просмотра!
* Простая таблица с текстом
* Таблица с изображениями и ссылками
* Сортируемая демо-таблица
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 15870   |   Оставлено комментариев: 4
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 7 января 2013 @ 21:10
Написал: acelote — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
не могу понять: а чем отличается это решение от предыдущего, опубликованного 24 декабря?
Комментарий #2: 8 января 2013 @ 13:10
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
acelote, ничем, просто в данном материале дано расширенное описание. 24 декабря был просто краткий анонс.
Комментарий #3: 9 января 2013 @ 07:24
Написал: acelote — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Цитата: Design FactoRy
просто в данном материале дано расширенное описание

А! Понял. СПС.
Комментарий #4: 27 февраля 2014 @ 12:45
Написал: Aterr — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здравствуйте.
Наткнулся на вашу статью. Плагин хороший, спору нет, но есть много нюансов по поводу использования плагинов на сайте, в принципе. Половина функицонала, написанного на js очень часто не используется на сайте. Я хочу предложить вашим читателям, на мой взгляд, полезный способ адаптации таблиц при помощи html css и jQuery.
Пример реализации вы можете посмотреть перейдя по указанной ссылке
http://aterr.net/adaptivnaya-tablita/
Надеюсь, читателям вашего сайта это чем нибудь поможет, а вы, в свою очередь, не сочтете мое сообщение за спам.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930