Все для создания и продвижения сайтов

Верстка, программирование, SEO

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

количество просмотров
Простая фильтрация таблицы на Jquery

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

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

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

Имя Фамилия Отчество
Иван Петров Викторович
Василий Иванов Александрович
Иван Иванов Викторович
Петр Петров Александрович
Александр Петров Викторович

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

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

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.

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

<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-разметки. Если есть вопросы, пишите в комментарии

Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.