Filter table with Bootstrap

BootstrapWeb DevelopmentCSS Framework

To filter a table in Bootstrap, you can try to run the following code −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "container">
         <h2>Students Rank</h2>
         <input class = "form-control" id = "demo" type = "text" placeholder = "Seach here,..">
         <br>
         <table class = "table table-bordered table-striped">
            <thead>
               <tr>
               <th>Name</th>
               <th>Marks</th>
               <th>Rank</th>
               </tr>
            </thead>
            <tbody id = "test">
               <tr>
                  <td>Amit</td>
                  <td>94</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Tom</td>
                  <td>90</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>Steve</td>
                  <td>88</td>
                  <td>3</td>
               </tr>
               <tr>
                  <td>Chris</td>
                  <td>80</td>
                  <td>4</td>
               </tr>
               <tr>
                  <td>Corey</td>
                  <td>79</td>
                  <td>5</td>
               </tr>
               <tr>
                  <td>Glenn</td>
                  <td>75</td>
                  <td>6</td>
               </tr>
            </tbody>
         </table>
      </div>
      <script>
         $(document).ready(function(){
            $("#demo").on("keyup", function() {
               var value = $(this).val().toLowerCase();
               $("#test tr").filter(function() {
                  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
               });
            });
         });
      </script>
   </body>
</html>
raja
Published on 21-Jun-2018 07:53:50
Advertisements