1. Введение в адаптивность таблиц и подключение расширения Responsive
Введение в адаптивность таблиц и подключение расширения Responsive
Добро пожаловать в курс DataTables.js: Работа с дополнительными колонками и адаптивностью. В современном веб-разработке представление данных играет ключевую роль. Таблицы — это классический и наиболее эффективный способ структурирования информации, но у них есть один существенный недостаток: они плохо масштабируются на маленьких экранах.
В этой первой статье мы разберем фундамент работы с адаптивными таблицами, узнаем, почему стандартные решения HTML часто не справляются с задачей, и научимся подключать и настраивать расширение Responsive для библиотеки DataTables.
Проблема больших таблиц на маленьких экранах
Представьте, что у вас есть таблица с десятью колонками: Имя, Фамилия, Должность, Офис, Возраст, Дата начала работы, Зарплата, E-mail, Телефон и ID сотрудника. На широком мониторе десктопа такая таблица выглядит великолепно. Данные легко читаются, сортировка работает, глаз охватывает всю строку целиком.
Однако, как только пользователь открывает эту же страницу на смартфоне, начинается хаос. Стандартное поведение HTML-таблицы в такой ситуации обычно сводится к двум вариантам:
Оба варианта негативно сказываются на пользовательском опыте (UX). Именно здесь на помощь приходит библиотека DataTables с расширением Responsive.
!Сравнение неадаптивной таблицы и таблицы с расширением Responsive на мобильном устройстве
Что такое DataTables Responsive?
DataTables — это мощный плагин для jQuery, который добавляет интерактивность к HTML-таблицам (сортировку, поиск, пагинацию). Сам по себе DataTables не делает таблицу полностью адаптивной в сложном понимании этого слова. Он может добавить горизонтальную прокрутку, но это не решает проблему удобства чтения.
Responsive — это официальное расширение (extension) для DataTables. Его задача — интеллектуально управлять видимостью колонок в зависимости от ширины экрана устройства.
Принцип работы
Когда ширины экрана недостаточно для отображения всех колонок, расширение Responsive автоматически скрывает наименее важные колонки. Самое интересное происходит дальше: скрытая информация не исчезает бесследно. Она перемещается в специальную дочернюю строку (child row), которая раскрывается при клике на первую колонку или специальную иконку.
Это позволяет сохранить структуру таблицы чистой и аккуратной, предоставляя доступ к дополнительным данным (тем самым «дополнительным колонкам») по требованию.
Подготовка окружения и подключение библиотек
Для работы нам понадобится подключить несколько файлов. DataTables зависит от библиотеки jQuery, поэтому порядок подключения имеет критическое значение.
Вам понадобятся три компонента:
!Иерархия зависимостей для работы адаптивной таблицы
Подключение через CDN
Самый быстрый способ начать работу — использовать CDN (Content Delivery Network). Добавьте следующие ссылки в секцию <head> вашего HTML-документа для стилей и перед закрывающим тегом </body> для скриптов.
#### Стили (CSS)
#### Скрипты (JS)
Обратите внимание на порядок: сначала jQuery, потом DataTables, потом Responsive.
> Важно: Версии библиотек могут меняться. Всегда проверяйте актуальные ссылки на официальном сайте datatables.net.
Создание HTML-структуры
DataTables требует корректной семантической разметки таблицы. Обязательно наличие тегов <thead> и <tbody>. Также таблице необходимо присвоить уникальный id и класс display (или table, если вы используете Bootstrap, но об этом позже).
Для корректной работы расширения Responsive рекомендуется добавить класс nowrap к тегу <table>. Этот класс предотвращает перенос текста внутри ячеек, заставляя расширение скрывать колонку целиком, если она не помещается.
Пример разметки:
javascript ('#example').DataTable({ responsive: true }); }); html <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Адаптивная таблица DataTables</title> <!-- Стили --> <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css"> <style> body { font-family: Arial, sans-serif; padding: 20px; } </style> </head> <body>
<h2>Пример адаптивной таблицы</h2> <table id="myTable" class="display nowrap" style="width:100%"> <thead> <tr> <th>Имя</th> <th>Фамилия</th> <th>Должность</th> <th>Город</th> <th>Возраст</th> <th>Телефон</th> </tr> </thead> <tbody> <tr> <td>Иван</td> <td>Иванов</td> <td>Разработчик</td> <td>Москва</td> <td>28</td> <td>+7 (999) 000-00-00</td> </tr> <tr> <td>Анна</td> <td>Петрова</td> <td>Дизайнер</td> <td>Санкт-Петербург</td> <td>24</td> <td>+7 (999) 111-11-11</td> </tr> </tbody> </table>
<!-- Скрипты --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
<script> ('#myTable').DataTable({ responsive: true }); }); </script>
</body> </html> ```
Заключение
Мы успешно подключили библиотеку DataTables и расширение Responsive. Теперь ваша таблица умеет адаптироваться под любые размеры экранов, скрывая «лишние» колонки и предоставляя доступ к ним через удобный интерфейс раскрывающихся строк.
Это базовый уровень адаптивности. Однако часто возникает необходимость контролировать, какие именно колонки должны скрываться первыми, а какие должны оставаться видимыми всегда (например, имя сотрудника или кнопка действия). В следующей статье мы углубимся в настройку приоритетов колонок и научимся управлять их поведением вручную.