Хороший плагин для организации поиска и фильтрации данный в таблице 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); }
Параметры:
Option | Type | Default | Description |
---|---|---|---|
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:
|
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 |