FILTER TABLE DATA HTML5 CSS3

SEARCH LARGE TABLE WITH KEYWORDS

Sometimes we have Table , Which contains Data of Different Persons with His Name , Father Name

CNIC and some other relevent data . Table will Look like we made in Excel . When You make such Table in HTML5 CSS3 and Display it on web and you are looking for your Data , Si if Data is about of 1k-10K People , so it will take time to find your Information as you will just scroll and Scroll.

So Here we have a Filter Search Option in HTML5 which make it easy for finding information in a

long Table with huge Information.

Here We Will look into Example

In Above Picture , you are seeing Table and their Having Search Bar and Below are some Information of Different People with Their Correponding Name , Last Name and Email.When You write your Name , Last Name or Email Result of that record will be singly Displayed. If Multiple record of a single Name or Exist , then Multiple record of that Name will be Displayed If your search keywords are Same in other Rows.

SOURCE CODE FOR THIS FILTER TABLE

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-4">

  <meta name="viewport" content="width=device-width, initial-scale=3">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.4.0/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  <h2>Filterable Table</h2>

  <p>Type something in the input field to search the table for first names, last names or emails:</p>  

  <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>

  

  <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>

</div>



<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>



</body>

</html>

Code can Be Edit and You can Add Multiple Rows , Columns or any other Information.

Wednesday 13 February 2019

FILTER TABLE DATA HTML5 CSS3

SEARCH LARGE TABLE WITH KEYWORDS

SOURCE CODE FOR THIS FILTER TABLE

No comments:

Post a Comment

Follow Us

Recent

Featured post