Creating a Dynamic Searchable Table with Bootstrap and jQuery

Tokenhell Support Updated at: 26 Jan 2024 303

Write HTML Here

​x
 
<!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>

Write CSS Code Here

xxxxxxxxxx
 
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 */
}

Write Js Code Here

xxxxxxxxxx
 
$(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();
        }
    });
});