How do i make Table search filter using HTML Javascript

Published October 27, 2021

In this Bootstrap5 tutorial we will create simple Table search filter using html javascript functionality. For this example we are showing the list of students with student name,email,mobile number and marks

Bootstrap5 Table search filter using Javascript

We added bootstrap5 css and js files

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script>

search box

We created search box using form-control class

<input class="form-control" id="myInput" type="text" placeholder="Search..">

Search functionality

On enter the text inside search box we are reading input text and filter the data from Table using this search text and updating the table with new search data

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

Complete code for Table Search filter

<!DOCTYPE html>
<html lang="en">
<head>
<title>How do i make Bootstrap5 table search filter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script>
</head>
<body style="text-align:center;">
<div class="container mt-3 border border-primary" >
  <div class="row">
    <div class="col-md-12">
      <h2 style="color: #09b30e;">Student marks Dashboard with Serch Filter</h2>
      <p>Search students with their name, email, marks...</p>
      <input class="form-control" id="myInput" type="text" placeholder="Search..">
      <br>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Contact Number</th>
            <th>Mraks</th>
          </tr>
        </thead>
        <tbody id="tableData">
          <tr>
            <td>Usha</td>
            <td>Koda</td>
            <td>usha@yahoo.com</td>
            <td>+91-8968330000</td>
            <td>89</td>
          </tr>
          <tr>
            <td>Kiranmayi</td>
            <td>raga</td>
            <td>Kiranmayi@test.com</td>
            <td>+91-8798220000</td>
            <td>77</td>
          </tr>
          <tr>
            <td>Rajashekar</td>
            <td>Singh</td>
            <td>Raj@example.com</td>
            <td>+91-8768111111</td>
            <td>89</td>
          </tr>
          <tr>
            <td>Mouli</td>
            <td>charan</td>
            <td>mouli@gmail.com</td>
            <td>+91-9879879879</td>
            <td>98</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</div>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#tableData tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</body>
</html>

Conclusion: In this Bootstrap5 tutorial example we created table search filter using Javascript.

Article Contributed By :

608 Views

Projects By category