Код для реализации живого поиска по таблице с помощью jQuery очень простой. Для оформления стилей таблицы буду использовать bootstrap.
Подключаем jQuery к странице (в блоке <head> или перед закрывающимся </body>):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Далее выведем поле для поисковой фразы и таблицу. Выводим поле поиска:
<div class="form-group"> <input type="text" class="form-control pull-right" id="search" placeholder="Поиск по таблице"> </div>
Таблица:
<table class="table table-striped" id="mytable" cellspacing="0" style="width: 100%;"> <thead> <tr role="row"> <th>Название</th> <th>Автор</th> <th>Дата</th> <th>Просмотры</th> <th>Категория</th> </tr> </thead> <tbody> <tr> <td>jQuery, стилизация полей ввода с помощью fancyInput</td> <td>Алиса</td> <td>3 ноября 2016 г.</td> <td>34</td> <td>jQuery</td> </tr> <tr> <td>JQuery email autocomplete. Автозавершение электронной почты в форме</td> <td>Алиса</td> <td>25 августа 2016 г.</td> <td>56</td> <td>jQuery</td> </tr> <tr> <td>Проверка надежности пароля с помощью jQuery</td> <td>Алиса</td> <td>18 августа 2016 г.</td> <td>68</td> <td>jQuery</td> </tr> <tr> <td>Прогресс бар прокрутки страницы</td> <td>Алиса</td> <td>12 августа 2016 г.</td> <td>99</td> <td>jQuery</td> </tr> <tr> <td>Вывод превью изображений перед загрузкой с помощью JavaScript и HTML5 FileReader()</td> <td>Алиса</td> <td>16 июня 2016 г.</td> <td>99</td> <td>jQuery</td> </tr> </tbody> </table>
И самое главное для этого примера, скрипт поиска:
<script> $(document).ready(function(){ $("#search").keyup(function(){ _this = this; $.each($("#mytable tbody tr"), function() { if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) { $(this).hide(); } else { $(this).show(); }); }); }); </script>
Поясню немного суть скрипта. После нажатия (точнее отжатия) клавиши запускается скрипт поиска, проверяет совпадения по строкам таблицы, скрывает строки которые не содержат поисковую фразу и отображает те строки, которые ее содержат. Вот и все. Спасибо за внимание.
Комментарии
Отличная статья, очень пригодилось.
ОтветитьА возможно ли сделать постраничную навигацию по таблице, без перезагрузки? На jQuery.
конечно можно
ОтветитьЗдравствуйте! как сделать навигацию? Спасибо
ОтветитьОтличный сайт и код который меня спас; я столкнулся с конфликтом datatables.min.js и кодом advanced social chat v2, Дело в том что подключая часть кода advanced social chat v2, к таблице с datatables.min.js пропадал поиск.
ОтветитьБлагодаря Вам я смог решить эту проблему . Огромное Вам спасибо и желаю чтобы Вы дальше продолжали
только пагинация теперь пропало буду решать эту проблему
ОтветитьЕсли интересует ещё - плагин Footables.js автоматом делает таблицы с поиском и пагинацией.
ОтветитьБольшое спасибо за наводку.
ОтветитьДобрый день!
ОтветитьСкажите, пожалуйста, как осуществлять поиск с постраничной навигацией. Без навигации все понятно:) А вот с ней не могу пока сообразить. По сути товары, которые на 2 и последующих страницах ещё не доступны.
Надеюсь на Вашу помощь.
Спасибо!
Если интересует ещё - плагин Footables.js автоматом делает таблицы с поиском и пагинацией.
ОтветитьБольшое спасибо, помог скрипт поиска. Лаконично и понятно ;)
Ответитьспасибо, смысл конечно доступен и понятен, но когда статьи такие выкладываешь, код проверяй, там ошибки синтаксиса есть
ОтветитьКод не работает, как минимум ну хватало 1 закрывающей фигурной скобки в конце. Может ли кто-нибудь написать исправленный код, а то я в JS, а тем более в jQuery не бум-бум. Буду очень признателен, мне бы очень пригодился данный скрипт.
ОтветитьПриветствую, Александр!
Лови код. Скобку добавил:)
АлександрАлександрОтветить
Доброго дня, Дмитрий. Благодарю за помощь, все ожило)
ОтветитьДрузья, выручайте. планирую использовать данный скрипт так:
ОтветитьПользователь вбивает свой номер телефона и ему отображается то что он есть в этом списке.
А теперь вопрос:
Можно ли сделать так, чтобы другие номера в таблице были скрытные и подменён код оператора например так +7 (xxx) 5399666.
Буду очень признателен.
Добрый день!
ОтветитьОчень полезная штука, а можно такую тему сделать в виде модуля для opencart 3 чтобы было что то подобное как на фото.
Нужно во так как на нижней картинке. И сколько это будет стоить. Просто такого модуля нет, а спрос есть!
Не проблема, цены от 20$
ОтветитьСпасибо за код.
ОтветитьОстался один вопрос. Можно ли сделать поиск сразу по нескольким столбцам, к примеру столбец1+столбец2+и т.д
Всем привет. А реально ли сделать подобный поиск по таблице отображающейся из базы данных? Заранее огромное спасибо за ответ
ОтветитьИмпортируй из таблицы БД в таблицу html и уже далее делай по ней поиск
ОтветитьЕсть таблица с пагинацией. Данный код ищет только на первой странице пагинации. Как сделать чтобы искал на всех?
ОтветитьА как сделать чтобы можно было находить слова с буквой "ё" при вводе "е"? Есть в таблице селёдка, а надо чтоб находилась и при написании селедка.
ОтветитьПодскажите пожалуйста, как сделать так, чтобы поиск игнорировал определённый столбец?
ОтветитьВсем привет, подскажите как к коду поиска добавить еще поиск по атрибуту? Например в строке находится ссылка с длинным названием, а в атрибуте я укажу короткое. типа <tr><td><a href="ссылка" alt="Бвг">Бла-вла-гла</a></td></tr>. Чтобы поиск учитывал Бвг?
ОтветитьЗдравствуйте! А как вывести сообщение если нет результатов?
ОтветитьВсе классно, только вот как отверстать горизонтальную полосу прокрутки в самом внизу, она там на немножко ездиет, в мобильной версий не удобно
ОтветитьНе работает в Joomla 3... что не так делаю?
ОтветитьПодскажите, пожалуйста. Как сделать таблицу невидимой, чтоб выводилась только нужная строка. Заранее благодарна.
Ответить