DataTables [#140][#161]

public/styles.css

@@ -172,3 +172,14 @@ li.option-votes {
 
 	box-shadow: inset 0px 0px 3px #444;
 }
+
+/** 
+ * DataTables 
+ * Based on http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css
+ */
+.sorting { background: url('http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/images/sort_both.png') no-repeat center right; }
+.sorting_asc { background: url('http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/images/sort_asc.png') no-repeat center right; }
+.sorting_desc { background: url('http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/images/sort_desc.png') no-repeat center right; }
+
+.sorting_asc_disabled { background: url('http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/images/sort_asc_disabled.png') no-repeat center right; }
+.sorting_desc_disabled { background: url('http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/images/sort_desc_disabled.png') no-repeat center right; }

views/layout.jade

@@ -2,6 +2,7 @@
 html(lang='en')
   head 
     meta(charset='utf-8')
+    script(type="text/javascript", src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js")
     link(rel="stylesheet", type="text/css", href="http://fonts.googleapis.com/css?family=Source+Sans+Pro")
     link(rel="stylesheet", type="text/css", href="/bootstrap/css/bootstrap.min.css")
     link(rel='stylesheet', type='text/css', href='/styles.css')
@@ -16,4 +17,3 @@ html(lang='en')
     script(type="text/javascript", src="/bootstrap/js/bootstrap.min.js")
     script(type="text/javascript", src="/d3/d3.v3.min.js")
     script(type="text/javascript", src="/script.js")
-

views/users/users.jade

@@ -1,11 +1,44 @@
 extends ../layout
 
 block content
+    script(type="text/javascript", src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js")
+
+    script
+        $(document).ready(function(){
+            // Allowing forcing data such as lincent and wpl to sort as numeric
+            jQuery.extend( jQuery.fn.dataTableExt.oSort, {
+                "forcenum-pre": function ( a ) {
+                    return parseFloat( a );
+                },
+             
+                "forcenum-asc": function ( a, b ) {
+                    return a - b;
+                },
+             
+                "forcenum-desc": function ( a, b ) {
+                    return b - a;
+                }
+            } );
+
+            $('.data').dataTable({
+              "aoColumnDefs": [
+                { "sType": "forcenum", "aTargets": [ 3, 4 ] }
+              ],
+              "bPaginate": false,
+              "bLengthChange": false,
+              "oLanguage": {
+                "sInfo":  "_TOTAL_ users",
+                "sInfoEmpty":  "No users :(",
+                "sInfoFiltered": "filtered (_MAX_ total)"
+              },
+            });
+        });
+
     h3 Users of #{channel} on #{connection}
     div#backlink 
         a(href='/channels/'+connection) « Channel List
     div#row
-        table.table.table-striped
+        table.table.table-hover.data
             thead
                 tr
                   th Users