WWW.POSETI.NET

Живой поиск – фильтрация данный для html таблицы


Хороший плагин для организации поиска и фильтрации данный в таблице html реализованный на jQuery.

Проект на GitHub

Перепечатывать все настройки нет смысла, так что вкратце.

Для того что бы все заработало надо подключить jQuery и скрип Gridster:

<!-- библиотека jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- плагин FilterTable -->
<script src="js/jquery.filtertable.min.js"></script>

Вызываем FilterTable и указываем класс таблицы к которой необходимо добавить фильтр:

$(document).ready(function() {
    $('.table-filter').filterTable({
        label:'',
        placeholder: 'поиск по таблице'
    });
});

Стили для подсветки результатов:

.filter-table .quick { margin-left: 0.5em; font-size: 0.8em; text-decoration: none; }
.fitler-table .quick:hover { text-decoration: underline; }
td.alt { background-color: #ffc; background-color: rgba(255, 255, 0, 0.2); }

Параметры:

OptionTypeDefaultDescription
autofocus boolean false Makes the filter input field autofocused (not recommended for accessibility reasons)
callback function(term, table) null Callback function after a filter is performed. Parameters:
  • term filter term (string)
  • table table being filtered (jQuery object)
containerClass string filter-table Class applied to the main filter input container
containerTag string p Tag name of the main filter input container
hideTFootOnFilter boolean false Controls whether the table's tfoot(s) will be hidden when the table is filtered
highlightClass string alt Class applied to cells containing the filter term
ignoreClass string '' Ignore any cells with this class when filtering
ignoreColumns array [] Ignore these columns (0-indexed) when filtering
inputSelector string null Use this selector to find the filter input instead of creating a new one (only works if selector returns a single element)
inputName string filter-table Name attribute of the filter input field
inputType string search Tag name of the filter input itself
label string Filter: Text to precede the filter input
minChars integer 1 Filter only when at least this number of characters are in the filter input field
minRows integer 8 Only show the filter on tables with this number of rows or more
placeholder string search this table HTML5 placeholder text for the filter input
preventReturnKey boolean true Trap the return key in the filter input field to prevent form submission
quickList array [] List of clickable phrases to quick fill the search
quickListClass string quick Class of each quick list item
quickListClear string '' Label for the clear filtering quick list item (or none if blank)
quickListGroupTag string '' Tag name surrounding quick list items (e.g., ul)
quickListTag string a Tag name of each quick list item (e.g., a or li)
visibleClass string visible Class applied to visible rows
#jQuery

Copyright © 2019