Browse Source

HUE-855 [core] Make tables scroll within the page

Introduced jHueTable scroller plugin and applied to all the datatables (see footer)
Enrico Berti 13 years ago
parent
commit
32ea5616b8

+ 6 - 0
desktop/core/src/desktop/templates/common_footer.html

@@ -29,5 +29,11 @@ limitations under the License.
     </script>
 {% endif %}
 
+    <script type="text/javascript">
+        $(document).ready(function(){
+            $(".dataTables_wrapper").jHueTableScroller();
+        });
+    </script>
+
 	</body>
 </html>

+ 1 - 0
desktop/core/src/desktop/templates/common_header.mako

@@ -81,6 +81,7 @@ from django.utils.translation import ugettext as _
   <script src="/static/js/Source/jHue/jquery.alert.js"></script>
   <script src="/static/js/Source/jHue/jquery.rowselector.js"></script>
   <script src="/static/js/Source/jHue/jquery.notify.js"></script>
+  <script src="/static/js/Source/jHue/jquery.tablescroller.js"></script>
   <script src="/static/ext/js/jquery/plugins/jquery.cookie.js"></script>
   <script src="/static/ext/js/jquery/plugins/jquery.simpleplaceholder.js"></script>
   <script src="/static/ext/js/jquery/plugins/jquery.dataTables.1.8.2.min.js"></script>

+ 56 - 0
desktop/core/static/js/Source/jHue/jquery.tablescroller.js

@@ -0,0 +1,56 @@
+/*
+ * jHue table scroller plugin
+ *
+ */
+;
+(function ($, window, document, undefined) {
+
+    var pluginName = "jHueTableScroller",
+        defaults = {
+        };
+
+    function Plugin(element, options) {
+        this.element = element;
+        this.options = $.extend({}, defaults, options);
+        this._defaults = defaults;
+        this._name = pluginName;
+        this.init();
+    }
+
+    Plugin.prototype.setOptions = function (options) {
+        this.options = $.extend({}, defaults, options);
+    };
+
+    Plugin.prototype.init = function () {
+        var _this = this;
+
+        resizeScrollingTable(_this.element);
+
+        $(window).resize(function () {
+            resizeScrollingTable(_this.element);
+        });
+
+        function resizeScrollingTable(el) {
+            $(el).css("overflow-y", "").css("height", "");
+            var heightAfter = 0;
+            $(el).nextAll(":visible").each(function () {
+                heightAfter += $(this).outerHeight();
+            });
+            if ($(el).height() > ($(window).height() - $(el).offset().top - heightAfter)) {
+                $(el).css("overflow-y", "auto").height($(window).height() - $(el).offset().top - heightAfter);
+            }
+        }
+    };
+
+    $.fn[pluginName] = function (options) {
+        return this.each(function () {
+            if (!$.data(this, 'plugin_' + pluginName)) {
+                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
+            }
+            else {
+                $.data(this, 'plugin_' + pluginName).setOptions(options);
+            }
+        });
+    }
+
+})(jQuery, window, document);