Главная › Новости

Простая фильтрация таблицы на Jquery

Опубликовано: 01.09.2018

Сортировка таблиц - при помощи плагина TableSorter.js

Рассмотрим как создать простую таблицу с возможностью фильтрации данных. Для удобства и простоты будем использовать Jquery.

Пример работы ниже. Вы можете начинать вводить данные и вам будут подставляться нужные результаты. Можно фильтровать сразу через все поля.

Демонстрация

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

Реализация очень простая. Вам нужно лишь вставить разметку, подключить jquery и скрипт.

Уроки JavaScript Практика #9 Как сделать Фильтрацию на сайт

html-разметка таблицы

<style> #filter-table{ width: 100%; } #filter-table th{ background-color: #dadada; } #filter-table td, #filter-table th{ padding: 5px; border-bottom: 1px solid #ccc; } </style> <table id="filter-table"> <tr> <th>Имя</th> <th>Фамилия</th> <th>Отчество</th> </tr> <tr class='table-filters'> <td> <input type="text"/> </td> <td> <input type="text"/> </td> <td> <input type="text"/> </td> </tr> <tr class='table-data'> <td>Иван</td> <td>Петров</td> <td>Викторович</td> </tr> <tr class='table-data'> <td>Василий</td> <td>Иванов</td> <td>Александрович</td> </tr> <tr class='table-data'> <td>Иван</td> <td>Иванов</td> <td>Викторович</td> </tr> <tr class='table-data'> <td>Петр</td> <td>Петров</td> <td>Александрович</td> </tr> <tr class='table-data'> <td>Александр</td> <td>Петров</td> <td>Викторович</td> </tr> </table>

Думаю тут все просто, для лучшего вида, добавил немного CSS.

Сортировка и фильтрация элементов с помощью плагина jQuery MixItUp

Скрипт фильтрации.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <script> $('.table-filters input').on('input', function () { filterTable($(this).parents('table')); }); function filterTable($table) { var $filters = $table.find('.table-filters td'); var $rows = $table.find('.table-data'); $rows.each(function (rowIndex) { var valid = true; $(this).find('td').each(function (colIndex) { if ($filters.eq(colIndex).find('input').val()) { if ($(this).html().toLowerCase().indexOf( $filters.eq(colIndex).find('input').val().toLowerCase()) == -1) { valid = valid && false; } } }); if (valid === true) { $(this).css('display', ''); } else { $(this).css('display', 'none'); } }); } </script>

Подключили библиотеку jquery и сам скрипт. Не забудьте, что js-скрипты должны идти после html-разметки. Если есть вопросы, пишите в комментарии