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).
* У строк появляется возможность расширяться для отображения скрытых данных.

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

Стив и я работали и над другими табличными плагинами, вроде 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. Мы только что выпустили дополнение с сортировкой по дате, но сейчас мы немного заняты фильтрующим дополнением, и надеемся создать еще несколько полезных дополнений. Мы также надеемся, что сообщество поможет нам в этом нелегком деле, и предложит по-настоящему отличные дополнения. Вы можете ознакомиться с кодом нашего шаблона здесь.

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

Здесь вы можете найти все демо с простым в использовании переключателем размера окна просмотра!