bootstrap+bootstrap-table

by bairog

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
		
    <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
  </head>

  <style>
    body {
      width: 100%;
      height: 100%;
      background-color: grey;
      font-family: 'Lato', serif;
    }

  </style>

  <body>
    <input type="text" id="myInput" placeholder="Search for names.." title="Type in a name">

    <table id="myTable" class="table table-dark table-bordered table-sm" 
		data-toggle="table" data-search="true" data-search-selector="#myInput" data-height="260" data-virtual-scroll="true">
      <thead>
        <tr>
          <th scope="col" data-sortable="true">#</th>
          <th scope="col" data-sortable="true">First</th>
          <th scope="col" data-sortable="true">Last</th>
          <th scope="col" data-sortable="true">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
				<tr>
          <th scope="row">4</th>
          <td>Irvin</td>
          <td>Zelmann</td>
          <td>@irv</td>
        </tr>
        <tr>
          <th...

CSS

body {
  width: 100%;
  height: 100%;
  background-color: grey; 
  font-family: 'Lato', serif;
}

JavaScript

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

function myFunction2() {
  var value = $("#myInput2").val().toLowerCase();
	$("#myTable2 tbody tr").filter(function() {
	  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
}


/*$(document).ready(function() {
  $("#myInput2").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable2 tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});*/