Creating a Dynamic Searchable Table with Bootstrap and jQuery

Are you looking to improve the usability of your website’s data tables? Implementing a search feature can be a game-changer, allowing users to quickly find the information they need. In this blog post, we’ll walk you through the process of creating a Bootstrap table search feature using simple, easy-to-follow steps.

Step 1: Set Up Your HTML Table And Create the Search Input

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="path/to/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href=""> <!-- Add Font Awesome for the warning icon -->
<title>Bootstrap Table Search</title>
/* Add your CSS styles here */
<div class="container mt-5">
<div class="form-group pull-right">
<input type="text" id="tableSearch" class="search form-control" placeholder="What are you looking for?">
<span class="counter pull-right"></span>
<table class="table table-hover table-bordered results">
<th class="col-md-5 col-xs-5">Name / Surname</th>
<th class="col-md-4 col-xs-4">Job</th>
<th class="col-md-3 col-xs-3">City</th>
<tr class="warning no-result">
<td colspan="4"><i class="fa fa-warning"></i> No result</td>
<th scope="row">1</th>
<td>Alice Johnson</td>
<td>Web Designer</td>
<td>New York</td>
<th scope="row">2</th>
<td>David Smith</td>
<td>Software Engineer</td>
<td>Los Angeles</td>
<th scope="row">3</th>
<td>Sarah Brown</td>
<td>Marketing Manager</td>
<th scope="row">4</th>
<td>Michael Davis</td>
<td>Sales Representative</td>

<script src=""></script>
$(document).ready(function () {
$("#tableSearch").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("table tbody tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);

// Show the 'No result' row if there are no matching rows
var noResultRow = $("");
if ($("table tbody tr:visible").length === 0) {;
} else {

Step 2: Adding CSS

The below CSS code styles the search table defining table row colors, and customizing the appearance of a search input field. It also includes a counter and hides rows based on visibility attributes to create a dynamic table search feature.

body {
padding: 20px;
background-color: #f0f0f0; /* Background color for the body */

.results tr[visible='false'],
.no-result {
display: none;

.results tr[visible='true'] {
display: table-row;

.counter {
padding: 8px;
color: #ccc;

/* Table Background and Row Colors */
.results tr:nth-child(odd) {
background-color: #f2f2f2; /* Alternate row background color */

.results th {
background-color: #555; /* Header row background color */
color: #fff; /* Header row text color */

.results td {
background-color: #fff; /* Table cell background color */

/* Search Input Styles */
.search {
background-color: #e0e0e0; /* Background color for search input */

Step 3: Implement JavaScript for Table Search

Now write the JavaScript code that performs the table search. We’ll use jQuery to simplify the process:

$(document).ready(function() {
$(".search").keyup(function() {
var searchTerm = $(".search").val().toLowerCase();
var listItem = $('.results tbody').children('tr');

listItem.each(function() {
var textContent = $(this).text().toLowerCase();
if (textContent.includes(searchTerm)) {
$(this).attr('visible', 'true');
} else {
$(this).attr('visible', 'false');

var visibleItems = $('.results tbody tr[visible="true"]');
$('.counter').text(visibleItems.length + (visibleItems.length === 1 ? ' item' : ' items'));

if (visibleItems.length === 0) {
} else {

Step 4: CDNs

Creating a Dynamic Searchable Table with Bootstrap and jQuery Demo

This we have created a Bootstrap table search feature to enhance the user experience on your website. Users can now quickly and easily find the data they need within your tables.

You Might Be Interested In:

Ashfaq Ahmed is a freelance WordPress developer and owner of I developed modern and highly interactive websites. I always focus on improving my development and design skills.

Leave a Comment