How to Create Filter Tables using jQuery

What Will I Learn?

You will learn filter Event
You will learn how to apply filter event on table element
You will learn how to get value from table element

Requirements

You have basic about html
You have basic about css
You have basic about JavaScript

Difficulty

Basic

Tutorial Contents

Almost the same as filter lists in the previous tutorial, only this will filter the contents of a table. When a character is typed in the search box, the table displays only the content that matches the type in the search box. For more details, let's look at the following steps.

Create a html file that contain a table and a search box above the table. In this tutorial I create using bootstrap frame work. you can copy my code bellow or you can also create as you want.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Filterable Table</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>The Utopian Supervisor</h2>
  <p>Type something in the input field to search a supervisor detail</p>  
  <input class="form-control" type="text" placeholder="Search..">
  <br>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Steem Account</th>
        <th>Country</th>
        <th>Discord account</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>arie.steem</td>
        <td>Indonesia</td>
        <td>arie.steem</td>
      </tr>
      <tr>
        <td>podanrj</td>
        <td>Indonesia</td>
        <td>podan.rj</td>
      </tr>
      <tr>
        <td>ruah</td>
        <td>Phliphines</td>
        <td>ruah</td>
      </tr>
      <tr>
        <td>espoem</td>
        <td>Czech Republic</td>
        <td>espoem</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

This page not have any function just display the table. To add the filter Event we use jQuery. Before adding jQuery we should host jQuery file or add the CDN of jQuery ( you can get it in jQuery official official). In this tutorial I just add the CDN, paste the code bellow in <head> element.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

To get value from html element by id you should add id attribut in <input element of check box. And also you must ad id attribut in <tbody> element to get value from body of table.

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

<tbody id="content">

Adding jQueryEvent Script, Paste the code bellow before </body> :

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

Script Explained : ready() to load the script after html loading. $("#filter") to get value from html element with id is filter. on("keyup", function() On edit/keyup event. $(this).val() to get value of input. toLowerCase() to change all character to lower case. $("#content tr") to get value by id content and tr element. toggle method hides the row (display:none) that does not match the search.

Finish, Save the file and run it on your browser

CLICK HERE TO LIVE DEMO

Here the full code, you can copy and paste on your file :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Filterable Table</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>The Utopian Supervisor</h2>
  <p>Type something in the input field to search a supervisor detail</p>  
  <input id="filter" class="form-control" type="text" placeholder="Search..">
  <br>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Steem Account</th>
        <th>Country</th>
        <th>Discord account</th>
      </tr>
    </thead>
    <tbody id="content">
      <tr>
        <td>arie.steem</td>
        <td>Indonesia</td>
        <td>arie.steem</td>
      </tr>
      <tr>
        <td>podanrj</td>
        <td>Indonesia</td>
        <td>podan.rj</td>
      </tr>
      <tr>
        <td>ruah</td>
        <td>Phliphines</td>
        <td>ruah</td>
      </tr>
      <tr>
        <td>espoem</td>
        <td>Czech Republic</td>
        <td>espoem</td>
      </tr>
    </tbody>
  </table>
</div>
<script>
$(document).ready(function(){
  $("#filter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#content tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</body>
</html>

Curriculum

How to Create Filter Lists using jQuery

Posted on Utopian.io - Rewarding Open Source Contributors