Use jQuery table sorter for search results

etsy · Apr 25, 2017 · 3d626bc · 3d626bc
1 parent e2f4477
commit 3d626bc
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/public/scripts/search-client.js b/public/scripts/search-client.js
@@ -3,6 +3,7 @@ $(document).ready(function() {
   // populate and render results table
   $.get('/flows/search/' + search_term, function(data) {
     ViewUtil.renderMatchedJobs(DataUtil.unpackFlows(data));
+    $("#matched").tablesorter();
   });
 
 });
diff --git a/public/scripts/view-util.js b/public/scripts/view-util.js
@@ -132,7 +132,7 @@ var ViewUtil = (function($) {
 
     ///////////////// private utility functions ////////////////
     function renderJobsTable(flows, barStylez, clusterFilter, isCompletedJobs) {
-	var rows = '<tr>' +
+	var rows = '<thead><tr>' +
 	    '<th>Job Name</th>' +
 	    '<th>User</th>' +
 	    '<th>Cluster</th>' +
@@ -142,7 +142,7 @@ var ViewUtil = (function($) {
 	    '<th>Running Time</th>' +
 	    '<th>Start Time</th>' +
 	    (isCompletedJobs ? '<th>End Time</th>' : '<th>Progress</th>') +
-	    '</tr>';
+	    '</tr></thead><tbody>';
 	for (var i = 0; i < flows.length; ++i) {
 	    var f = flows[i];
 	    if (clusterFilter === undefined || f.cluster_name === clusterFilter) {
@@ -162,6 +162,7 @@ var ViewUtil = (function($) {
 		    '</tr>';
 	    }
 	}
+      rows += '</tbody>'
 	return rows;
     }
 

diff --git a/views/index-layout.jade b/views/index-layout.jade
@@ -23,6 +23,8 @@ html
       script(src='/scripts/moment.min.js')
       script(src='/scripts/URI.min.js')
       script(src='/scripts/jquery.URI.min.js')
+      script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.7/js/jquery.tablesorter.js')
+      script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.7/js/jquery.tablesorter.widgets.js')
 
   body
     include index-header