Таблицы – это фундаментальный элемент веб-дизайна, используемый для организации и представления данных в структурированном формате. Однако когда дело доходит до отображения таблиц на небольших экранах или мобильных устройствах, их чтение и навигация могут оказаться затруднительными. К счастью, Bootstrap 4 Datatable предоставляет мощное решение, позволяющее сделать таблицы отзывчивыми и удобными для пользователя. В этой статье мы рассмотрим различные методы реализации адаптивных таблиц с использованием Bootstrap 4 Datatable, дополненные разговорными объяснениями и примерами кода.

Метод 1: базовая настройка
Для начала нам нужно включить необходимые файлы CSS и JavaScript для таблицы данных Bootstrap 4 в наш HTML-документ. Вы можете загрузить эти файлы или включить их через сеть доставки контента (CDN). Вот пример:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>

Метод 2: инициализация DataTable
После добавления необходимых файлов мы можем инициализировать плагин DataTable в нашем элементе таблицы. Вот простой фрагмент кода инициализации:

$(document).ready(function() {
  $('#myTable').DataTable();
});

Метод 3: сделать таблицу адаптивной
По умолчанию DataTables предоставляет адаптивную функцию, которая автоматически настраивает макет таблицы в зависимости от доступного места на экране. Чтобы включить эту функцию, мы можем добавить параметр responsive: trueво время инициализации:

$(document).ready(function() {
  $('#myTable').DataTable({
    responsive: true
  });
});

Метод 4: скрытие столбцов на экранах меньшего размера
Иногда необходимо скрыть определенные столбцы на экранах меньшего размера, чтобы сохранить читабельность. Мы можем добиться этого, используя параметр responsiveвместе с параметром columnsво время инициализации. Вот пример:

$(document).ready(function() {
  $('#myTable').DataTable({
    responsive: {
      details: {
        type: 'column',
        target: 'tr'
      }
    },
    columnDefs: [{
      className: 'dtr-control',
      targets: 0
    }]
  });
});

Метод 5: настройка поведения точки останова
Bootstrap 4 Datatable позволяет нам настраивать поведение таблицы в различных точках останова. Мы можем определить конкретные точки останова и соответствующие настройки, используя опцию responsive. Вот пример:

$(document).ready(function() {
  $('#myTable').DataTable({
    responsive: {
      breakpoints: [
        {name: 'desktop', width: Infinity},
        {name: 'tablet-l', width: 1024},
        {name: 'tablet-p', width: 768},
        {name: 'mobile-l', width: 480},
        {name: 'mobile-p', width: 320}
      ],
      columnDefs: [
        {className: 'd-none', targets: 'desktop'},
        {className: 'd-none d-sm-table-cell', targets: 'tablet-l'},
        {className: 'd-none d-md-table-cell', targets: 'tablet-p'},
        {className: 'd-none d-lg-table-cell', targets: 'mobile-l'},
        {className: 'd-none d-xl-table-cell', targets: 'mobile-p'},
      ]
    }
  });
});

Bootstrap 4 Datatable — это универсальный инструмент для создания адаптивных таблиц в ваших веб-проектах. В этой статье мы рассмотрели несколько методов реализации адаптивных таблиц с использованием Bootstrap 4 Datatable. Следуя этим методам, вы сможете гарантировать, что ваши таблицы адаптируются и обеспечивают оптимальное взаимодействие с пользователем на различных устройствах и размерах экрана.