Add table sorting by clicking on headers

get_online_session_communities.php

@@ -595,18 +595,20 @@
 			"<h1 id=\"headline\">Session Communities</h1>" . PHP_EOL .
 			"<table id=\"tbl_communities\">" . PHP_EOL .
 			"	<tr>" . PHP_EOL .
-			"		<th id=\"th_identifier\">Identifier</th>" . PHP_EOL .
+			"		<th onclick=\"sortTable(0)\" id=\"th_identifier\">Identifier</th>" . PHP_EOL .
-			"		<th id=\"th_name\">Name</th>" . PHP_EOL .
+			"		<th onclick=\"sortTable(1)\" id=\"th_name\">Name</th>" . PHP_EOL .
-			"		<th id=\"th_description\">Description</th>" . PHP_EOL .
+			"		<th onclick=\"sortTable(2)\" id=\"th_description\">Description</th>" . PHP_EOL .
-			"		<th id=\"th_users\">Users</th>" . PHP_EOL .
+			"		<th onclick=\"sortTable(3)\" id=\"th_users\">Users</th>" . PHP_EOL .
-			"		<th id=\"th_preview\">Preview</th>" . PHP_EOL .
+			"		<th onclick=\"sortTable(4)\" id=\"th_preview\">Preview</th>" . PHP_EOL .
-			"		<th id=\"th_join_url\">Join URL</th>" . PHP_EOL .
+			"		<th onclick=\"sortTable(5)\" id=\"th_join_url\">Join URL</th>" . PHP_EOL .
 			"	</tr>" . PHP_EOL;
 
 		// suffix
 		// span over 6 columns (id, name, description, users, preview, join link)
 		$span_count = 6;
 		$suffix =
+			"</table>" . PHP_EOL .
+			"<table id=\"tbl_footer\">" . PHP_EOL .
 			"	<tr>" . PHP_EOL .
 			"		<td id=\"td_summary\" colspan=\"" . $span_count . "\">" . count($table_lines) . " unique Session Communities have been found.</td>" . PHP_EOL .
 			"	</tr>" . PHP_EOL .

output/script.js

@@ -1,3 +1,58 @@
 function copyToClipboard(text) {
     navigator.clipboard.writeText(text);
 }
+
+function sortTable(n) {
+  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+  table = document.getElementById("tbl_communities");
+  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;
+      }
+    }
+  }
+}

output/styles.css

@@ -14,5 +14,7 @@
 
 .copy_button     {  }
 
+#tbl_footer      { width:100%; }
+
 #td_summary      { text-align: center; }
 #td_last_checked { text-align: center; }