table

content/learningmodule/_index.md

@@ -26,11 +26,11 @@ Type the subject name or topic of interest in the search box below.
 <!-- <table  id="myTable" class="table table-bordered table-hover table-condensed"> -->
 <table class="sortable">
 <thead><tr><th title="Field #1">Subject</th>
-<th title="Field #2">Grade</th>
-<th title="Field #3">Title</th>
-<th title="Field #4">Description</th>
-<th title="Field #5">Link</th>
-<th title="Field #6">Date Added</th>
+<th title="Field #2" onclick="sortTable(0)">Grade</th>
+<th title="Field #3" onclick="sortTable(1)">Title</th>
+<th title="Field #4" onclick="sortTable(2)">Description</th>
+<th title="Field #5" onclick="sortTable(3)">Link</th>
+<th title="Field #6" onclick="sortTable(4)">Date Added</th>
 </tr></thead>
 <tbody><tr>
 <td>Biology</td>
@@ -872,4 +872,6 @@ Type the subject name or topic of interest in the search box below.
 <td><a href="https://bit.ly/40juWza" target="_blank">Click</a></td>
 <td>2023-10-26</td>
 </tr>
-</tbody></table>
+</tbody></table>
+
+<script src="sort.js"></script>

content/learningmodule/sort.js

@@ -0,0 +1,54 @@
+function sortTable(n) {
+    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+    table = document.getElementById("myTable");
+    switching = true;
+    //Set the sorting direction to ascending:
+    dir = "asc"; 
+    /*Make a loop that will continue until
+    no switching has been done:*/
+    while (switching) {
+      //start by saying: no switching is done:
+      switching = false;
+      rows = table.rows;
+      /*Loop through all table rows (except the
+      first, which contains table headers):*/
+      for (i = 1; i < (rows.length - 1); i++) {
+        //start by saying there should be no switching:
+        shouldSwitch = false;
+        /*Get the two elements you want to compare,
+        one from current row and one from the next:*/
+        x = rows[i].getElementsByTagName("TD")[n];
+        y = rows[i + 1].getElementsByTagName("TD")[n];
+        /*check if the two rows should switch place,
+        based on the direction, asc or desc:*/
+        if (dir == "asc") {
+          if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+            //if so, mark as a switch and break the loop:
+            shouldSwitch= true;
+            break;
+          }
+        } else if (dir == "desc") {
+          if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+            //if so, mark as a switch and break the loop:
+            shouldSwitch = true;
+            break;
+          }
+        }
+      }
+      if (shouldSwitch) {
+        /*If a switch has been marked, make the switch
+        and mark that a switch has been done:*/
+        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+        switching = true;
+        //Each time a switch is done, increase this count by 1:
+        switchcount ++;      
+      } else {
+        /*If no switching has been done AND the direction is "asc",
+        set the direction to "desc" and run the while loop again.*/
+        if (switchcount == 0 && dir == "asc") {
+          dir = "desc";
+          switching = true;
+        }
+      }
+    }
+  }