Skip to content

Instantly share code, notes, and snippets.

@adiafora
Last active December 8, 2023 08:25
Show Gist options
  • Save adiafora/67ec6e95797b172fffa8db3abaeeba9f to your computer and use it in GitHub Desktop.
Save adiafora/67ec6e95797b172fffa8db3abaeeba9f to your computer and use it in GitHub Desktop.
Поиск по таблице JS. Пример на https://codepen.io/adiafora/pen/xxxRjVP
<div class="panel-body main">
<div class="form-group">
<input id="search" class="form-control" placeholder="Поиск по имени или фамилии..." autocomplete="off" name="search" type="text" oninput="tableSearch();">
</div>
<table class="table" id="table-search">
<thead>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Тут не ищем</th>
</tr>
</thead>
<tbody>
<tr>
<td class="searchable">Иван</td>
<td class="searchable">Петров</td>
<td>Верстальщик</td>
</tr>
<tr>
<td class="searchable">Сергей</td>
<td class="searchable">Карпов</td>
<td>Программист</td>
</tr>
<tr>
<td class="searchable">Сергей Петрович</td>
<td class="searchable">Серов</td>
<td>Директор</td>
</tr>
</tbody>
</table>
</div>
function tableSearch() {
var str = $('input#search').val().toLowerCase();
if (str.length <= 1){
$('table#table-search tbody tr').show();
} else {
$('table#table-search tbody tr').each(function(){
var found = false;
$(this).find('td.searchable').each(function(){
if ($(this).text().toLowerCase().indexOf(str) >= 0){
found = true;
}
});
if (found === false){
$(this).hide();
} else {
$(this).show();
}
});
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
.panel-body {
margin-top: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
@adiafora
Copy link
Author

adiafora commented Oct 20, 2019

Пример простого js скрипта для быстрого поиска по таблице.

К поисковой строке добавляем id search, к таблице, по которой производится поиск id table-search, а к колонкам, по которым следует искать - class searchable.

Всё, монтаж закончен.

Поиск будет производиться по любому кол-ву столбцов.
Пример смотрите на https://codepen.io/adiafora/pen/xxxRjVP

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment