search on table

static/js/search_on_table.js

@@ -1,26 +1,23 @@
-
 // Search on table using search inpute options
 function searchTable() {
     let input = document.getElementById("searchBar").value.toLowerCase();
-    let rows = document.querySelectorAll("table tbody tr");
+    let tables = document.querySelectorAll("table");
 
-    rows.forEach(row => {
-        let blockName = row.cells[1].textContent.toLowerCase();
-        let districtName = row.cells[2].textContent.toLowerCase();
-        let villageName = row.cells[3].textContent.toLowerCase();
+    tables.forEach(table => {
+        let rows = table.querySelectorAll("tr");
 
-        if (blockName.includes(input) || districtName.includes(input)|| villageName.includes(input)) {
-            row.style.display = "";
-        } else {
-            row.style.display = "none";
-        }
+        rows.forEach((row, index) => {
+            if (index === 0) return; // header skip
+
+            let text = row.textContent.toLowerCase();
+
+            row.style.display = text.includes(input) ? "" : "none";
+        });
     });
 }
 
 
 
-
-
 // Common Sorting Script for Tables
 function sortTable(n, dir) {
     var table, rows, switching, i, x, y, shouldSwitch;
@@ -57,14 +54,14 @@ function sortTable(n, dir) {
 }
 
 // Attach sorting functionality to all sortable tables
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
     // Find all elements with the class "sortable-header"
     var sortableHeaders = document.querySelectorAll(".sortable-header");
 
-    sortableHeaders.forEach(function(header) {
+    sortableHeaders.forEach(function (header) {
         // Attach click event for ascending sort
         if (header.querySelector(".sort-asc")) {
-            header.querySelector(".sort-asc").addEventListener("click", function() {
+            header.querySelector(".sort-asc").addEventListener("click", function () {
                 var columnIndex = Array.from(header.parentNode.children).indexOf(header);
                 sortTable(columnIndex, "asc");
             });
@@ -72,7 +69,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
         // Attach click event for descending sort
         if (header.querySelector(".sort-desc")) {
-            header.querySelector(".sort-desc").addEventListener("click", function() {
+            header.querySelector(".sort-desc").addEventListener("click", function () {
                 var columnIndex = Array.from(header.parentNode.children).indexOf(header);
                 sortTable(columnIndex, "desc");
             });
@@ -105,4 +102,31 @@ document.addEventListener("DOMContentLoaded", function () {
         displayButton.classList.add("active-button");
         addButton.classList.remove("active-button");
     });
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+
+    let tables = document.querySelectorAll("table");
+
+    tables.forEach(table => {
+        let header = table.querySelector("tr:first-child");
+
+        if (header) {
+            header.style.position = "sticky";
+            header.style.top = "0";
+            header.style.background = "#fff";
+            header.style.zIndex = "2";
+        }
+
+        if (!table.parentElement.classList.contains("table-wrapper")) {
+            let wrapper = document.createElement("div");
+            wrapper.classList.add("table-wrapper");
+            wrapper.style.maxHeight = "65vh"
+            wrapper.style.overflowY = "auto";
+
+            table.parentNode.insertBefore(wrapper, table);
+            wrapper.appendChild(table);
+        }
+    });
+
 });