How to create bootstrap filter tables

In this tutorial, I will share how to create bootstrap filter tables. In this example, we will add a search text box at the of the bootstrap table. When the user starts typing any words to search below tables will automatically filter in the real-time, no need to hit the Enter button or page load to see the search result.

This filter will help you to save your time to filter the data listed from the table. If you want to create the table filter suing bootstrap framework, then keep your close eye on this post as I a, going to share how to create bootstrap filter tables with an example.

Bootstrap filter table

Let’s create filter table using bootstrap. First, create a table.html file and for filter table, make sure you have included the below external CSS & JS files before head tag closed.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

HTML Code

copy the below HTML code and paste it into the body area or where you want to display filter table.

<div class="container"> <h2>Filterable Table</h2> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <br> <table class="table table-bordered table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody id="myTable"> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@mail.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@greatstuff.com</td> </tr> <tr> <td>Anja</td> <td>Ravendale</td> <td>a_r@test.com</td> </tr> </tbody> </table> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<div class="container">
  <h2>Filterable Table</h2>
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="myTable">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@mail.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
      <tr>
        <td>Anja</td>
        <td>Ravendale</td>
        <td>a_r@test.com</td>
      </tr>
    </tbody>
  </table>

</div>

jQuery code

Copy the jQuery code and add it before the body tag closed.

<script type="text/javascript">

$(document).ready(function(){

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();
  
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  
  });

});
</script>

$(document).ready(function(){

$("#myInput").on("keyup", function() {

var value = $(this).val().toLowerCase();

$("#myTable tr").filter(function() {

$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

});

</script>

After following the above steps your table would look like the below screenshot.

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

How to create bootstrap filter tables

Bootstrap filter table

jQuery code

Recommended Posts:

webmentor