Создание таблицы с фильтрацией в Bootstrap: полезные советы и инструкции

Bootstrap — это один из самых популярных фреймворков для разработки веб-сайтов. Он предоставляет множество инструментов и компонентов, которые значительно упрощают создание стильного и отзывчивого интерфейса.

Одним из таких компонентов является таблица. Таблицы — это отличный способ представления данных на сайте. Они очень гибкие и позволяют быстро организовать информацию в удобном для пользователя виде. Однако, когда таблица содержит большое количество данных, может быть трудно найти нужную информацию.

В этой статье мы рассмотрим, как создать таблицу с фильтром в Bootstrap. Фильтр позволяет пользователю динамически искать информацию в таблице. Oн позволяет отфильтровывать данные по определенным критериям и показывать только те строки, которые соответствуют выбранным условиям.

Создание таблицы с фильтром

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

Для начала нужно создать основную структуру таблицы с помощью тегов <table>, <thead>, <tbody> и <tr>.

Пример:


<table class="table table-bordered">
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</tbody>
</table>

Чтобы добавить фильтр к таблице, нужно воспользоваться компонентом input-group и классом form-control.

Пример:


<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Поиск">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Искать</button>
</div>
</div>

В итоге, получается таблица с фильтром, где пользователь может ввести текст для поиска и нажать кнопку «Искать».

Также можно использовать JavaScript для добавления дополнительной функциональности к таблице, например, для фильтрации значений по ключевым словам или сортировки данных.

Учтите, что для работы с таблицей с фильтром может потребоваться подключение дополнительных скриптов или плагинов.

Шаг 1: Подключение Bootstrap

Существует несколько способов подключения Bootstrap, и вы можете выбрать любой из них в зависимости от своих предпочтений и требований.

Наиболее распространенным способом является подключение Bootstrap через ссылку на файлы CSS и JavaScript, расположенные на удаленном сервере:

<!-- Подключение файлов Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Вы также можете скачать файлы Bootstrap и разместить их в своей папке проекта:

<!-- Подключение файлов Bootstrap -->
<link rel="stylesheet" href="путь_к_папке_bootstrap/css/bootstrap.min.css">
<script src="путь_к_папке_bootstrap/js/bootstrap.min.js"></script>

После подключения файлов Bootstrap вашему проекту станут доступны всевозможные классы и компоненты, которые вы можете использовать для создания стильных и отзывчивых таблиц с фильтром.

Шаг 2: Создание таблицы

В следующем шаге мы создадим таблицу с помощью классов Bootstrap и добавим фильтр для удобного поиска данных. Вот пример кода:

<div class="container">

<table class="table table-bordered table-hover">

<thead class="thead-light">

<tr>

<th>ID</th>

<th>Имя</th>

<th>Возраст</th>

</tr>

</thead>

<tbody id="myTable">

<tr>

<td>1</td>

<td>Иван</td>

<td>25</td>

</tr>

<tr>

<td>2</td>

<td>Мария</td>

<td>30</td>

</tr>

<tr>

<td>3</td>

<td>Алексей</td>

<td>35</td>

</tr>

<tr>

<td>4</td>

<td>Елена</td>

<td>28</td>

</tr>

</tbody>

</table>

</div>

Вы можете заметить, что в нашем примере таблица содержит три столбца: ID, Имя и Возраст. Тело таблицы содержит четыре строки с данными. Обратите внимание на атрибут id=»myTable» для тега tbody — это будет использоваться в следующем шаге для добавления функционала фильтрации.

Шаг 3: Добавление фильтра

Теперь, когда у нас есть таблица с данными, мы хотим добавить фильтр для удобного поиска и сортировки информации. Для этого мы воспользуемся возможностями Bootstrap и JavaScript.

Сначала добавим строку с фильтрами над таблицей:

<tr id="filter-row">
<td><input type="text" id="filter-name" placeholder="Фильтр по имени"></td>
<td><input type="text" id="filter-age" placeholder="Фильтр по возрасту"></td>
<td><input type="text" id="filter-city" placeholder="Фильтр по городу"></td>
</tr>

Здесь мы добавляем три текстовых поля для фильтрации по имени, возрасту и городу. Каждое поле имеет уникальный идентификатор, который мы будем использовать в JavaScript.

Теперь добавим JavaScript код, который будет обрабатывать ввод в эти поля и скрывать/отображать соответствующие строки таблицы:

<script>
$(document).ready(function () {
$("#filter-name").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#data-table tr").filter(function () {
$(this).toggle($(this).find("td:nth-child(1)").text().toLowerCase().indexOf(value) > -1)
});
});
$("#filter-age").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#data-table tr").filter(function () {
$(this).toggle($(this).find("td:nth-child(2)").text().toLowerCase().indexOf(value) > -1)
});
});
$("#filter-city").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#data-table tr").filter(function () {
$(this).toggle($(this).find("td:nth-child(3)").text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>

Этот код использует событие keyup, чтобы отслеживать ввод в текстовые поля фильтров. Для каждого поля он берет введенное значение и сравнивает его с соответствующими ячейками таблицы. Если значение совпадает, строка остается видимой, в противном случае строка скрывается.

Теперь у нас есть рабочий фильтр, который позволяет пользователю легко находить нужные данные в таблице. Вы можете добавить дополнительные фильтры или изменить логику фильтрации по своему усмотрению.

Оцените статью