Added tablesorter so the server list can be sorted.

src/static/css/style.css

@@ -13,10 +13,6 @@ body {
     font-family: "Helvetica Neue", Helvetica, Arial,sans-serif;
 }
 
-.right {
-    float: right;
-}
-
 /* Header and navbar **********************************************************/
 #navbar {
     background-color: #333;
@@ -102,3 +98,25 @@ body {
     color: #444;
 }
 
+/* Utils **********************************************************************/
+.right {
+    float: right;
+}
+
+.tablesorter-head ::before {
+    font-family: "Glyphicons Halflings";
+    content: "−";
+    margin-right: 5px;
+    font-size: small;
+}
+
+.tablesorter-asc ::before {
+    font-family: "Glyphicons Halflings";
+    content: "";
+}
+
+.tablesorter-desc ::before {
+    font-family: "Glyphicons Halflings";
+    content: "";
+}
+

src/templates/gameservers/server_list.html

@@ -1,15 +1,16 @@
 {% extends "base_site.html" %}
+{% load staticfiles %}
 
 {% block title %}
     Index
 {% endblock %}
 
 {% block content %}
-    <table class="table table-hover">
+    <table id="servers" class="table table-hover tablesorter">
         <thead>
             <tr>
-                <th>Players</th>
+                <th><span>Players</span></th>
-                <th>Server</th>
+                <th><span>Server</span></th>
             </tr>
         </thead>
         <tbody>
@@ -30,4 +31,17 @@
             {% endfor %}
         </tbody>
     </table>
+
+    <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/jquery.tablesorter.min.js' %}"></script>
+    <script>
+        $(document).ready(function(){
+            var settings = {
+                cssAsc: 'tablesorter-asc',
+                cssDesc: 'tablesorter-desc',
+                cssHeader: 'tablesorter-head',
+            };
+            $("#servers").tablesorter(settings);
+        });
+    </script>
 {% endblock %}