如何使用 javascript 和 bootstrap table 在多个 table 列上进行搜索？

Question

我想通过 javascript 指导我使用 bootstrap table 搜索在多个列上执行搜索功能。在这里，我展示了用于第一列搜索的 javascript 代码。指导我如何使用 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>

Answer 1

试试这个，

没有你完整的 html table，我只能猜测它的样子并尝试创建一些可行的东西

$("#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>

如何使用 javascript 和 bootstrap table 在多个 table 列上进行搜索？

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

javascript

php

jquery

bootstrap-table