Эх сурвалжийг харах

[beeswax] Introduce hueDataTable for tables with more than 500 cols

Enrico Berti 9 жил өмнө
parent
commit
439da83

+ 55 - 35
apps/beeswax/src/beeswax/templates/execute.mako

@@ -796,6 +796,7 @@ ${ layout.menubar(section='query') }
 ${ commonshare() | n,unicode }
 
 <script src="${ static('desktop/js/hue.json.js') }" type="text/javascript" charset="utf-8"></script>
+<script src="${ static('desktop/js/jquery.huedatatable.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery-ui-1.10.4.draggable-droppable-sortable.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/routie-0.3.0.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/knockout.min.js') }" type="text/javascript" charset="utf-8"></script>
@@ -1192,11 +1193,13 @@ function placeResizePanelHandle() {
 }
 
 function reinitializeTableExtenders() {
-  $("#resultTable").jHueTableExtender({
-     fixedHeader: true,
-     fixedFirstColumn: true,
-     includeNavigator: false
-  });
+  if (viewModel.design.results.columns().length > 0 && viewModel.design.results.columns().length < 500) {
+    $("#resultTable").jHueTableExtender({
+       fixedHeader: true,
+       fixedFirstColumn: true,
+       includeNavigator: false
+    });
+  }
   $("#recentQueries").jHueTableExtender({
      fixedHeader: true,
      includeNavigator: false
@@ -2074,39 +2077,56 @@ function resultsTable(e, data) {
   $.totalStorage(hac_getTotalStorageUserPrefix() + "${app_name}_temp_query", null);
   if (viewModel.design.results.columns().length > 0) {
     if (!dataTable) {
-      dataTable = $("#resultTable").dataTable({
-        "bPaginate": false,
-        "bLengthChange": false,
-        "bInfo": false,
-        "bDestroy": true,
-        "bAutoWidth": false,
-        "oLanguage": {
-          "sEmptyTable": "${_('No data available')}",
-          "sZeroRecords": "${_('No matching records')}"
-        },
-        "fnDrawCallback": function (oSettings) {
-          reinitializeTableExtenders();
-          if (firstFnDrawcallback) {
-            firstFnDrawcallback = false;
-            window.setTimeout(reinitializeTable, 100);
-          }
-        },
-        "aoColumnDefs": [
-          {
-            "sType": "numeric",
-            "aTargets": [ "sort-numeric" ]
+      if (viewModel.design.results.columns().length < 500) {
+        dataTable = $("#resultTable").dataTable({
+          "bPaginate": false,
+          "bLengthChange": false,
+          "bInfo": false,
+          "bDestroy": true,
+          "bAutoWidth": false,
+          "oLanguage": {
+            "sEmptyTable": "${_('No data available')}",
+            "sZeroRecords": "${_('No matching records')}"
+          },
+          "fnDrawCallback": function (oSettings) {
+            reinitializeTableExtenders();
+            if (firstFnDrawcallback) {
+              firstFnDrawcallback = false;
+              window.setTimeout(reinitializeTable, 100);
+            }
           },
-          {
-            "sType": "string",
-            "aTargets": [ "sort-string" ]
+          "aoColumnDefs": [
+            {
+              "sType": "numeric",
+              "aTargets": [ "sort-numeric" ]
+            },
+            {
+              "sType": "string",
+              "aTargets": [ "sort-string" ]
+            },
+            {
+              "sType": "date",
+              "aTargets": [ "sort-date" ]
+            }
+          ]
+        });
+        $(".dataTables_filter").hide();
+      }
+      else {
+        dataTable = $("#resultTable").hueDataTable({
+          "oLanguage": {
+            "sEmptyTable": "${_('No data available')}",
+            "sZeroRecords": "${_('No matching records')}"
           },
-          {
-            "sType": "date",
-            "aTargets": [ "sort-date" ]
+          "fnDrawCallback": function (oSettings) {
+            reinitializeTableExtenders();
+            if (firstFnDrawcallback) {
+              firstFnDrawcallback = false;
+              window.setTimeout(reinitializeTable, 100);
+            }
           }
-        ]
-      });
-      $(".dataTables_filter").hide();
+        });
+      }
       reinitializeTable();
       var _options = '<option value="-1">${ _("Please select a column")}</option>';
       $(viewModel.design.results.columns()).each(function(cnt, item){

+ 11 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -624,6 +624,13 @@ table.display td.center {
   vertical-align: middle!important;
 }
 
+.table-huedatatable th.sorting {
+  cursor: default;
+  background: none;
+  border-top: none;
+  padding-right: 0!important;
+}
+
 .sorting_disabled {
   vertical-align: middle!important;
 }
@@ -632,6 +639,10 @@ table.display td.center {
   border-top: 3px solid #EEEEEE !important;
 }
 
+.table-huedatatable th.sorting:hover {
+  border-top: none;
+}
+
 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  * Misc
  */

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

@@ -0,0 +1,68 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+/*
+ * Extension to datatable to programmatically switch off datatable in case of huge tables
+ *
+ */
+(function ($, window, document) {
+
+  $.fn.hueDataTable = function (oInit) {
+
+    var self = this;
+    this.$table = null;
+
+    this.fnAddData = function (mData, bRedraw) {
+      var $t = self.$table;
+      if (mData.length === 0) {
+        return;
+      }
+      var appendable = $t.children('tbody').length > 0 ? $t.children('tbody') : $t;
+      var html = '';
+      mData.forEach(function (row) {
+        html += '<tr>';
+        row.forEach(function (cell) {
+          html += '<td>' + cell + '</td>';
+        });
+        html += '</tr>';
+      });
+      appendable.append(html);
+      if (oInit['fnDrawCallback']){
+        oInit['fnDrawCallback']();
+      }
+    };
+
+    this.fnClearTable = function (bRedraw) {
+      var $t = self.$table;
+      if ($t.children('tbody').length > 0) {
+        $t.children('tbody').empty();
+      }
+      else {
+        $t.children('tr').remove();
+      }
+    };
+
+    this.fnDestroy = function () {
+      self.$table.unwrap();
+      self.$table.removeClass('table-huedatatable');
+    };
+
+    return this.each(function () {
+      self.$table = $(this);
+      self.$table.wrap('<div class="dataTables_wrapper"></div>');
+      self.$table.addClass('table-huedatatable');
+    });
+  };
+})(jQuery, window, document);