implement filter Table

prototype/src/main/resources/static/js/filterTable.js

@@ -0,0 +1,50 @@
+function filterTable(caller) {
+   let target = caller.dataset.targetId;
+   let searchTerm = caller.value;
+
+
+   let table = document.getElementById(target);
+   let tds = Array.from(table.getElementsByTagName("tr")).filter(elm =>
+      elm.getElementsByTagName("th").length == 0
+   );
+
+   let matching = [];
+   let notMatching = [];
+
+   for (let td of tds) {
+      if (td.innerText.toLowerCase().includes(searchTerm.trim().toLowerCase())) {
+         matching.push(td);
+      } else {
+         notMatching.push(td);
+      }
+   }
+
+   let valid = matching.length > 0 || tds.length == 0;
+   if (valid) {
+      caller.setCustomValidity("");
+      for (let td of matching) {
+         td.style.display = null;
+      }
+      for (let td of notMatching) {
+         td.style.display = "none";
+      }
+   } else {
+      caller.setCustomValidity("Nothing Matched");
+      for (let td of tds) {
+         td.style.display = null;
+      }
+   }
+}
+
+document.addEventListener("DOMContentLoaded", function(event) {
+   let elms = document.getElementsByClassName("jsFilterTable");
+   for (let elm of elms) {
+      elm.addEventListener('oninput', () => filterTable(elm));
+      elm.addEventListener('onpaste', () => filterTable(elm));
+      elm.addEventListener('keyup', () => filterTable(elm));
+
+      window.setTimeout(function() {
+         filterTable(elm);
+      }, 10);
+   }
+});