Browse Source

HUE-4486 [editor] Add back sorting to the result table

Enrico Berti 9 years ago
parent
commit
8fef8d22ce

+ 6 - 15
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -600,25 +600,25 @@ table.display td.center {
   *border-collapse: collapsed;
 }
 
-.sorting_asc {
+.sorting {
   cursor: pointer;
-  background: url('../art/datatables/sort_asc.png') no-repeat center right;
+  background: url('../art/datatables/sort_both.png') no-repeat center right;
   border-top: 3px solid #FFFFFF !important;
   padding-right: 20px !important;
   vertical-align: middle!important;
 }
 
-.sorting_desc {
+.sorting_asc {
   cursor: pointer;
-  background: url('../art/datatables/sort_desc.png') no-repeat center right;
+  background: url('../art/datatables/sort_asc.png') no-repeat center right;
   border-top: 3px solid #FFFFFF !important;
   padding-right: 20px !important;
   vertical-align: middle!important;
 }
 
-.sorting {
+.sorting_desc {
   cursor: pointer;
-  background: url('../art/datatables/sort_both.png') no-repeat center right;
+  background: url('../art/datatables/sort_desc.png') no-repeat center right;
   border-top: 3px solid #FFFFFF !important;
   padding-right: 20px !important;
   vertical-align: middle!important;
@@ -628,19 +628,10 @@ table.display td.center {
   margin-bottom: 0!important;
 }
 
-.table-huedatatable th.sorting {
-  cursor: default;
-  background: none;
-  border-top: none;
-  padding-right: 4px!important;
-  padding-left: 4px!important;
-}
-
 .table-huedatatable td.stripe {
   background: url('../art/stripedbackground.png');
 }
 
-
 .sorting_disabled {
   vertical-align: middle!important;
 }

+ 56 - 0
desktop/core/src/desktop/static/desktop/js/jquery.huedatatable.js

@@ -38,6 +38,41 @@
       }
     }
 
+    self.fnSortColumn = function (obj, way) {
+      var $t = self.$table;
+      var data = self.$table.data('data');
+
+      var idx = obj.originalIndex;
+      if (way === 0){
+        idx = 0;
+      }
+
+      if (way === -1 || way === 0){
+        data.sort(function (a, b) {
+          if (a[idx] > b[idx]) {
+            return 1;
+          }
+          if (a[idx] < b[idx]) {
+            return -1;
+          }
+          return 0;
+        });
+      }
+      else {
+        data.sort(function (a, b) {
+          if (a[idx] > b[idx]) {
+            return -1;
+          }
+          if (a[idx] < b[idx]) {
+            return 1;
+          }
+          return 0;
+        });
+      }
+
+      self.fnDraw(true);
+    }
+
     self.isDrawing = false;
 
     self.fnDraw = function (force) {
@@ -133,6 +168,10 @@
               $t.data('plugin_jHueTableExtender').drawLockedRows();
             }
 
+            if (force) {
+              $t.data('plugin_jHueTableExtender').drawFirstColumn();
+            }
+
           }
           $t.data('fnDraws', $t.data('fnDraws') + 1);
           if ($t.data('oInit')['fnDrawCallback']) {
@@ -206,6 +245,23 @@
       self.$table.data('fnDraws', 0);
       self.$table.wrap('<div class="dataTables_wrapper"></div>');
 
+      self.$table.bind('sort', function (e, obj) {
+        self.$table.find('thead tr th:not(:eq(' + obj.originalIndex + '))').removeClass('sorting_desc').removeClass('sorting_asc');
+        var $cell = self.$table.find('thead tr th:eq(' + obj.originalIndex + ')');
+        if ($cell.hasClass('sorting_desc')) {
+          $cell.removeClass('sorting_desc');
+          self.fnSortColumn(obj, 0);
+        }
+        else if ($cell.hasClass('sorting_asc')) {
+          $cell.removeClass('sorting_asc').addClass('sorting_desc');
+          self.fnSortColumn(obj, 1);
+        }
+        else {
+          $cell.addClass('sorting_asc');
+          self.fnSortColumn(obj, -1);
+        }
+      });
+
       if (typeof oInit !== 'undefined') {
         self.$table.data('oInit', oInit);
         var drawTimeout = -1;

+ 1 - 1
desktop/core/src/desktop/static/desktop/js/jquery.tableextender.js

@@ -497,7 +497,7 @@
     else {
       $pluginElement.find("thead>tr th").each(function (i) {
         var originalTh = $(this);
-        $("#" + $pluginElement.attr("id") + "jHueTableExtenderClonedContainer").find("thead>tr th:eq(" + i + ")").width(originalTh.width());
+        $("#" + $pluginElement.attr("id") + "jHueTableExtenderClonedContainer").find("thead>tr th:eq(" + i + ")").width(originalTh.width()).attr('class', originalTh.attr('class'));
       });
     }
   }

+ 1 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1709,7 +1709,7 @@ ${ hueIcons.symbols() }
               <table class="table table-condensed table-striped resultTable">
                 <thead>
                 <tr data-bind="foreach: result.meta">
-                  <th class="sorting" data-bind="html: ($index() == 0 ? '&nbsp;' : $data.name), css: typeof cssClass != 'undefined' ? cssClass : 'sort-string', attr: {title: $data.type }, style:{'width': $index() == 0 ? '1%' : ''}"></th>
+                  <th class="sorting" data-bind="html: ($index() == 0 ? '&nbsp;' : $data.name), css: typeof cssClass != 'undefined' ? cssClass : 'sort-string', attr: {title: $data.type }, style:{'width': $index() == 0 ? '1%' : ''}, click: function(obj, e){ $(e.target).parents('table').trigger('sort', obj); }"></th>
                 </tr>
                 </thead>
                 <tbody>