Bootstrap 4 การใช้งาน Filter

<form class="form-inline">
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

<input class="form-control mb-3" id="searchTable" type="text" placeholder="Search Table...">

<table class="table table-bordered">
  <thead>
    <tr>
      <th>ชื่อ</th>
      <th>อายุ</th>
      <th>อาชีพ</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>สมชาย</td>
      <td>25</td>
      <td>วิศวกร</td>
    </tr>
    <tr>
      <td>สมศรี</td>
      <td>30</td>
      <td>นักบัญชี</td>
    </tr>
    <tr>
      <td>สมปอง</td>
      <td>28</td>
      <td>ครู</td>
    </tr>
  </tbody>
</table>

document.getElementById("searchTable").addEventListener("keyup", function() {
  var value = this.value.toLowerCase();
  var rows = document.querySelectorAll("#myTable tr");

  rows.forEach(function(row) {
    row.style.display = row.textContent.toLowerCase().includes(value) ? "" : "none";
  });
});

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Filter by Age
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#" data-filter="25">25</a>
    <a class="dropdown-item" href="#" data-filter="30">30</a>
    <a class="dropdown-item" href="#" data-filter="28">28</a>
  </div>
</div>

<table class="table table-bordered mt-3">
  <thead>
    <tr>
      <th>ชื่อ</th>
      <th>อายุ</th>
      <th>อาชีพ</th>
    </tr>
  </thead>
  <tbody id="ageFilterTable">
    <tr data-age="25">
      <td>สมชาย</td>
      <td>25</td>
      <td>วิศวกร</td>
    </tr>
    <tr data-age="30">
      <td>สมศรี</td>
      <td>30</td>
      <td>นักบัญชี</td>
    </tr>
    <tr data-age="28">
      <td>สมปอง</td>
      <td>28</td>
      <td>ครู</td>
    </tr>
  </tbody>
</table>

document.querySelectorAll('.dropdown-item').forEach(function(item) {
  item.addEventListener('click', function() {
    var filterValue = this.getAttribute('data-filter');
    var rows = document.querySelectorAll('#ageFilterTable tr');
    
    rows.forEach(function(row) {
      row.style.display = row.getAttribute('data-age') === filterValue ? '' : 'none';
    });
  });
});

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="Engineer" id="engineerCheck">
  <label class="form-check-label" for="engineerCheck">
    วิศวกร
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="Accountant" id="accountantCheck">
  <label class="form-check-label" for="accountantCheck">
    นักบัญชี
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="Teacher" id="teacherCheck">
  <label class="form-check-label" for="teacherCheck">
    ครู
  </label>
</div>

<table class="table table-bordered mt-3">
  <thead>
    <tr>
      <th>ชื่อ</th>
      <th>อายุ</th>
      <th>อาชีพ</th>
    </tr>
  </thead>
  <tbody id="checkboxFilterTable">
    <tr data-job="Engineer">
      <td>สมชาย</td>
      <td>25</td>
      <td>วิศวกร</td>
    </tr>
    <tr data-job="Accountant">
      <td>สมศรี</td>
      <td>30</td>
      <td>นักบัญชี</td>
    </tr>
    <tr data-job="Teacher">
      <td>สมปอง</td>
      <td>28</td>
      <td>ครู</td>
    </tr>
  </tbody>
</table>

document.querySelectorAll('.form-check-input').forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    var checkedValues = Array.from(document.querySelectorAll('.form-check-input:checked')).map(function(checkbox) {
      return checkbox.value;
    });

    var rows = document.querySelectorAll('#checkboxFilterTable tr');
    rows.forEach(function(row) {
      row.style.display = checkedValues.includes(row.getAttribute('data-job')) ? '' : 'none';
    });
  });
});