How to do search on Multiple table colums using javascript and bootstrap table?

Question

I want to search do search functionality on multiple colums using bootstrap table by using javascript guide me. Here i am showing my javascript code used for search on first column. Guide me that how t use more columns using javascript.

$("#search").on("keyup",function(){
var value=$(this).val();
$("table tr").each(function(index){
    if (index!==0){
        $row = $(this);
        var id= $row.find("td:first").text();
        if (id.indexOf(value)!==0){
            $row.hide();
        }
        else{
            $row.show();
        }
    }
});

});

HTML

 <input type="text" name="search" id="search" placeholder="Search">
      <table data-toggle="table" data-sort-name="name" data-sort-order="asc" >
           <thead>
           <tr>
                <th data-field="name" data-sortable="true">Name</th>
                <th data-field="address" data-sortable="true">Address</th>
                <th data-field="birthdate" data-sortable="true">Birth Date</th>
                <th>Gender</th>
                <th data-field="hobby" data-sortable="true">Hobbies</th>
                <th>Action</th>
           </tr>
            </thead>

Could you please include your HTML, that way we would be able to give a more precisely answer — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Apr 25, 2017 at 5:28
for more there only php echo for printing values in tbody nothing else thats why i didn't wrote — Ashish Odich
– Ashish Odich, Commented Apr 25, 2017 at 5:38

Carsten Løvbo Andersen · Accepted Answer · 2017-04-25 05:54:04Z

Try this,

Without your full html table, I can only guess what it looks like and try to create something that would work

$("#search").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  console.clear()
  $("table tr").each(function(index) {
    if (index !== 0) {
      $row = $(this);
      $row.find("td").each(function(i, td) {
        var id = $(td).text().toLowerCase();
        console.log(id + " | " + value + " | " + id.indexOf(value))
        if (id.indexOf(value) !== -1) {
          $row.show();
          return false;
        } else {
          $row.hide();
        }
      })
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="search" id="search" placeholder="Search">
<table data-toggle="table" data-sort-name="name" data-sort-order="asc">
  <thead>
    <tr>
      <th data-field="name" data-sortable="true">Name</th>
      <th data-field="address" data-sortable="true">Address</th>
      <th data-field="birthdate" data-sortable="true">Birth Date</th>
      <th>Gender</th>
      <th data-field="hobby" data-sortable="true">Hobbies</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>Street 123</td>
      <td>03 may</td>
      <td>Male</td>
      <td>Code</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Emma</td>
      <td>Street 123</td>
      <td>03 may</td>
      <td>Female</td>
      <td>Code</td>
      <td>None</td>
    </tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

How to do search on Multiple table colums using javascript and bootstrap table?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related