Адаптивные таблицы HTML с помощью плагина FooTable

Здравствуйте, уважаемые читатели XoZbloga! Рассмотренный сегодня плагин будет полезен тем, кто часто пользуется HTML таблицами для отображения данных на страницах. FooTable — это JQuery плагин, который стремится сделать HTML таблицы удобными для пользователей с мобильными устройствами, независимо от того, сколько столбцов в таблице.



Плагин FooTable - адаптивные HTML таблицы

HTML разметка

Для работоспособности плагина помимо самого скрипта и библиотеки jQuery, понадобится еще и файл css со стилями. После подключения всего необходимо плагин можно использовать. Плагин настраивается с помощью атрибутов данных:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<table class="footable">
      <thead>
        <tr>
          <th data-class="expand">
            First Name
          </th>
          <th>
            Last Name
          </th>
          <th data-hide="phone,tablet">
            Job Title
          </th>
          <th data-hide="phone,tablet">
            DOB
          </th>
          <th data-hide="phone">
            Status
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>...</td>
          <td>...</td>
          <td>...</td>
          <td>...</td>
          <td>...</td>
        </tr>
        ...
      </tbody>
<table>

Таким образом, вы можете сразу увидеть, что некоторые столбцы будут скрыты от телефонов и планшетов (data-hide=»phone,tablet»). Также все ячейки в первом столбце с классом «expand» — используется для вставки в каждую первую ячейку иконки плюс/минус, для индикации открытых или закрытых скрытых полей. Пример в демо версии.

Инициализация

Таблица готова осталось привязать к ней плагин и проверить что получилось.

1
2
3
4
5
6
7
8
  $(function() {
    $('.footable').footable({
    breakpoints: {
      phone: 480,
      tablet: 1024
    }
    });
  });

При вызове плагина также можно задать свои размеры экрана, при которых скроются указанные столбцы. Т.е. при размере экрана менее 480px, скроются столбцы с пометкой phone.

Плагин для WordPress — WP-Table Reloaded



Продолжая «табличную тему», хотелось бы упомянуть о плагине для WordPress — WP-Table Reloaded. С его помощью можно легко создавать, экспортировать и импортировать таблицы/ Настраивать сортировку и тд. А вставка таблицы в записе производится с помощью короткого кода. Скачать ЗДЕСЬ.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!


Lingualeo