How To Filter Data Table Using Jquery With Html

Jennifer April 10, 2023 HTML

Here, we will see how to filter data from html tables using Jquery functions. Follow the below example to create a data table filter.

Example:

Create a html file and add the below snippet to your file. This file contains html data tables and jquery script for filtering the data from the table.

<!DOCTYPE html>
<html> 
<head>
    <title>How To Filter Data Table Using Jquery With Html</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>  
<body>
    <div id="data_style">
        <span>Search by FirstName, LastName or Email</span>
        <input id="data_input" class="tbox"  type="text" placeholder="Search.." />
        <br><br><br>
        <table>
          <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
                <th>Salary</th>
                <th>Age</th>
            </tr>
          </thead>
          <tbody id="tbody">
            <tr>
                <td>Bruno</td>
                <td>Nash</td>
                <td>bruno@example.com</td>
                <td>$163,500</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Cedric</td>
                <td>Kelly</td>
                <td>cedric@mail.com</td>
                <td>$433,060</td>
                <td>27</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>ashton@greatstuff.com</td>
                <td>$86,000</td>
                <td>40</td>
            </tr>
            <tr>
                <td>Angelica</td>
                <td>Ramos</td>
                <td>angelica@test.com</td>
                <td>$1,200,000</td>
                <td>47</td>
            </tr>
          </tbody>
        </table>
    </div>
</body>
<script>
    $(document).ready(function () {
        $("#data_input").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#tbody tr").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>
</html>

CSS:

Create an external stylesheet and add the below css to your stylesheet. Then link it to your html file.

body {
    margin: 50px;
    font-family: Arial, sans-serif;
    padding: 10px;
    background: #fafafa;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
  border: 2px solid #333;
  text-align: left;
  padding: 10px;
}

tr:nth-child(even) {
  background-color: #d3ead7;
}

.tbox {
    width: 300px;
    height: 30px;
    background: #f1f1f1;
    border-radius: 3px;
}