added table sorting infrastructure (DataTables)

arc42 · Dec 17, 2023 · 4d9bc88 · 4d9bc88
1 parent 441bbb7
commit 4d9bc88
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 9 deletions.
diff --git a/docs/_includes/head/custom.html b/docs/_includes/head/custom.html
@@ -8,6 +8,12 @@
 <!-- load htmx.org script from local  -->
 <script src="assets/htmx.min.js"></script>
 
+<!-- load DataTable stuff for sorting the table -->
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css">
+<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+<script type="text/javascript" charset="utf8"
+        src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
+
 
 <style>
 table {

diff --git a/docs/_pages/home.md b/docs/_pages/home.md
@@ -90,7 +90,7 @@ Data will be collected by arc42 statistics service running on
 
 
 
-<a id="de-org-canvas">
+<a id="de-org-canvas"/>
 ## German and International Site, canvas
 
 {% include feature_row id="de-org-canvas" %}
@@ -103,3 +103,17 @@ Data will be collected by arc42 statistics service running on
 
 
 The page was generated on {{ site.time }}.
+
+<!-- enable table sorting -->
+
+<script>
+    $(document).ready(function () {
+        $('#sortableStatsTable').DataTable(
+            {
+                info:false,
+                searching: false,
+                paging: false,
+                ordering: true
+            });
+    });
+</script>
diff --git a/go-app/internal/api/arc42statistics.gohtml b/go-app/internal/api/arc42statistics.gohtml
@@ -1,6 +1,7 @@
 <!-- golang template for arc42 usage statistics table -->
-
-<table>
+<!-- with addons to make it sortable with DataTables -->
+<table id="sortableStatsTable" class="display">
+    <thead>
     <tr>
         <th rowspan="2"><img src="/images/minion-logo-100px.png" alt="Gopher logo"></th>
         <th colspan="2" style="border-left: 2px solid black;">7 Days</th>
@@ -16,6 +17,9 @@
         <th style="border-left: 2px solid black;">Visitors</th>
         <th>PageViews</th>
     </tr>
+    </thead>
+
+    <tbody>
 
     {{ range .Stats4Site }}
         <tr>
@@ -26,18 +30,21 @@
             <td>{{ .Pageviews30d}}</td>
             <td style="border-left: 2px solid black;">{{ .Visitors12m}}</td>
             <td>{{ .Pageviews12m}}</td>
-            <td style="text-align: left;border-left: 2px solid black;"><a href="{{.Repo}}/issues">
+            <td style="text-align: left;border-left: 2px solid black;">
+                <a href="{{.Repo}}/issues">
                     <img alt="GitHub open issues" src="{{.IssueBadgeURL}}">
                 </a>
                 {{if .BugBadgeURL}}
-                    <a href="{{.Repo}}/issues">
+                <a href="{{.Repo}}/issues">
                         <img alt="GitHub bugs" src="{{.BugBadgeURL}}">
-                    </a>
+                </a>
                 {{end}}
             </td>
         </tr>
     {{ end }}
-    <tr>
+    </tbody>
+
+    <tfoot> <tr>
         <td style="border-top: 2px solid black;">Totals:</td>
         <td style="border-top: 2px solid black;border-left: 2px solid black;">{{ .Totals.SumOfVisitors7d}}</td>
         <td style="border-top: 2px solid black;">{{ .Totals.SumOfPageviews7d}}</td>
@@ -46,9 +53,10 @@
         <td style="border-top: 2px solid black;border-left: 2px solid black;">{{ .Totals.SumOfVisitors12m}}</td>
         <td style="border-top: 2px solid black;">{{ .Totals.SumOfPageviews12m}}</td>
         <td style="border-left: 2px solid black;"></td>
-    </tr>
+    </tr> </tfoot>
 </table>
 
+
 <br>
 <div style="font-size: 12px; padding-bottom: 14px;">
     Data collected in {{ .HowLongDidItTake }} msecs by arc42 statistics service

diff --git a/go-app/main.go b/go-app/main.go
@@ -9,9 +9,10 @@ import (
 	"strings"
 )
 
-const AppVersion = "0.4.5"
+const AppVersion = "0.4.6a"
 
 // version history
+// 0.4.6 sortable table
 // 0.4.5 fix missing separators in large numbers
 // 0.4.4 fix bad hyperlink to GitHub issues
 // 0.4.3 fix #57 (local svg images for issues and badges)