Added sorting plugin to header table, Now you can sort each column by…

… clicking header
mitodl · Jul 23, 2015 · 98beff9 · 98beff9
1 parent 3f158db
commit 98beff9
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 9 deletions.
diff --git a/edx_sga/sga.py b/edx_sga/sga.py
@@ -215,6 +215,7 @@ def student_view(self, context=None):
         )
         fragment.add_css(_resource("static/css/edx_sga.css"))
         fragment.add_javascript(_resource("static/js/src/edx_sga.js"))
+        fragment.add_javascript(_resource("static/js/src/jquery.tablesorter.min.js"))
         fragment.initialize_js('StaffGradedAssignmentXBlock')
         return fragment
 

diff --git a/edx_sga/static/css/edx_sga.css b/edx_sga/static/css/edx_sga.css
@@ -157,3 +157,11 @@
 .sga-block .display_name {
     color: inherit;
 }
+
+.sga-block table.tablesorter thead tr .header {
+ 	cursor: pointer;
+}
+
+.sga-block table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
+    background-color: #8dbdd8;
+}
diff --git a/edx_sga/static/js/src/edx_sga.js b/edx_sga/static/js/src/edx_sga.js
@@ -152,6 +152,35 @@ function StaffGradedAssignmentXBlock(runtime, element) {
 
                 updateChangeEvent(fileUpload);
             });
+            $.tablesorter.addParser({
+              id: 'alphanum',
+              is: function(s) {
+                return false;
+              },
+              format: function(s) {
+                var str = s.replace(/(\d{1,2})/g, function(a){
+                    return pad(a);
+                });
+
+                return str;
+              },
+              type: 'text'
+            });
+
+            function pad(num) {
+              var s = '00000' + num;
+              return s.substr(s.length-5);
+            }
+            $("#submissions").tablesorter({
+                headers: {
+                  2: { sorter: "alphanum" },
+                  3: { sorter: "alphanum" },
+                  6: { sorter: "alphanum" }
+                }
+            });
+            $("#submissions").trigger("update");
+            var sorting = [[1,0]];
+            $("#submissions").trigger("sorton",[sorting]);
         }
 
         /* Click event handler for "enter grade" */

diff --git a/edx_sga/static/js/src/jquery.tablesorter.min.js b/edx_sga/static/js/src/jquery.tablesorter.min.js
diff --git a/edx_sga/templates/staff_graded_assignment/show.html b/edx_sga/templates/staff_graded_assignment/show.html
@@ -48,16 +48,19 @@
 
   {% if is_course_staff %}
   <script type="text/template" id="sga-grading-tmpl">
-    <table class="gridtable">
+    <table class="gridtable tablesorter" id="submissions">
+      <thead>
       <tr>
-        <th>Username</th>
-        <th>Name</th>
-        <th>Filename</th>
-        <th>Uploaded</th>
-        <th>Grade</th>
-        <th>Instructor's comments</th>
-        <th>Annotated</th>
+        <th class="header">Username <i class="icon fa fa-sort"/></th>
+        <th class="header">Name <i class="icon fa fa-sort"/></th>
+        <th class="header">Filename <i class="icon fa fa-sort"/></th>
+        <th class="header">Uploaded <i class="icon fa fa-sort"/></th>
+        <th class="header">Grade <i class="icon fa fa-sort"/></th>
+        <th class="header">Instructor's comments <i class="icon fa fa-sort"/></th>
+        <th class="header">Annotated <i class="icon fa fa-sort"/></th>
       </tr>
+      </thead>
+      <tbody>
       <% for (var i = 0; i < assignments.length; i++) { %>
       <%     var assignment = assignments[i]; %>
         <tr id="row-<%= assignment.module_id %>">
@@ -107,6 +110,7 @@
           </td>
         </tr>
       <% } %>
+      </tbody>
     </table>
   </script>
 
@@ -180,4 +184,4 @@
     </div>
   </section>
   {% endif %}
-</div>
+</div>