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">
<head>
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Add Font Awesome for the warning icon -->
<title>Bootstrap Table Search</title>
<style>
/* Add your CSS styles here */
</style>
</head>
<body>
<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?">
</div>
<span class="counter pull-right"></span>
<table class="table table-hover table-bordered results">
<thead>
<tr>
<th>#</th>
<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>
<tr class="warning no-result">
<td colspan="4"><i class="fa fa-warning"></i> No result</td>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Alice Johnson</td>
<td>Web Designer</td>
<td>New York</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David Smith</td>
<td>Software Engineer</td>
<td>Los Angeles</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Sarah Brown</td>
<td>Marketing Manager</td>
<td>Chicago</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Michael Davis</td>
<td>Sales Representative</td>
<td>Houston</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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 = $("tr.warning.no-result");
if ($("table tbody tr:visible").length === 0) {
noResultRow.show();
} else {
noResultRow.hide();
}
});
});
</script>
</body>
</html>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) {
$('.no-result').show();
} else {
$('.no-result').hide();
}
});
});Step 4: CDNs
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
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.
