New options breakpoint evaluation, debounce support

README.md

@@ -25,7 +25,7 @@ Add Bootstrap, Datatables-Bootstrap and responsive Datatables helper CSS files.
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"/>
 <link rel="stylesheet" href="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.css"/>
-<link rel="stylesheet" href="../../files/1/css/datatables.responsive.css"/>
+<link rel="stylesheet" href="../../files/1.9/css/datatables.responsive.css"/>
 ```
 If you are using Bootstrap 2, see the `ajax-bootstrap2.html` example.
 
@@ -35,7 +35,7 @@ If you are using Bootstrap 2, see the `ajax-bootstrap2.html` example.
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"/>
 <link rel="stylesheet" href="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.css"/>
-<link rel="stylesheet" href="../../files/2/css/datatables.responsive.css"/>
+<link rel="stylesheet" href="../../files/1.10/css/datatables.responsive.css"/>
 ```
 
 
@@ -56,15 +56,15 @@ Add jQuery, Datatables, Datables-Bootstrap and the responsive Datatables helper
 <script src="//code.jquery.com/jquery.min.js"></script>
 <script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
 <script src="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.js"></script>
-<script src="../../files/1/js/datatables.responsive.js"></script>
+<script src="../../files/1.9/js/datatables.responsive.js"></script>
 ```
 **DataTables 1.10.x and Bootstrap 3.x**
 
 ```html
 <script src="//code.jquery.com/jquery.min.js"></script>
 <script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
 <script src="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.js"></script>
-<script src="../../files/2/js/datatables.responsive.js"></script>
+<script src="../../files/1.10/js/datatables.responsive.js"></script>
 ```
 
 ## Create variables and break point definitions.
@@ -236,6 +236,31 @@ Currently supported options are:
 - Default: null
 - Function called when the detail row is going to be hidden.  Passes the jquery tr object for the detail row as an argument.
 
+`widthReference`
+
+- Type: `String`
+- Acceptable values: `window`, `parent` or `custom`
+- Default: `window`
+- Defines, which DOM element should be used to compare width to breakpoints: Window object, the parent object of the table element (usually the enclosing container element) or a custom element defined by customReferenceElement.
+
+`customReferenceElement`
+
+- Type: `Object`
+- Default: null
+- DOM object to be used as reference element to compare width to breakpoints.
+
+`consoleLog`
+
+- Type: `Boolean`
+- Default: false
+- Defines, whether window resize events and the measured reference element width should be logged to console.
+
+`debounceWait`
+
+- Type: `Integer`
+- Default: 100
+- Wait time for debounced window resize events, supports jQuery Debounce plugin and Underscore debound methods.
+
 ## Thanks
 Thanks to Allan Jardine for making the best data table plugin for jQuery.  Nothing out there comes close.
 

files/1.10/js/datatables.responsive.js

@@ -48,6 +48,18 @@
  *          clickOn                     - icon|cell|row, default: icon
  *          showDetail                  - function called when detail row shown
  *          hideDetail                  - function called when detail row hidden
+ *          widthReference              - window|parent|custom, default: window
+ *                                        Defines, which is the reference element
+ *                                        width to compare the breakpoints to:
+ *                                        window = browser window, parent = parent
+ *                                        element of the table element, custom =
+ *                                        custom element defined by
+ *                                        customReferenceElement
+ *          customReferenceElement      - custom reference element, default: null
+ *          debounceWait                - Wait time for debounce resize events,
+ *                                        default: 100 (ms)
+ *          consoleLog					- Boolean, default: false. Defines wether
+ *                                        resize events should be logged to console.
  *     }
  *
  * @param {Object|string} tableSelector jQuery wrapped set or selector for
@@ -115,7 +127,11 @@ function ResponsiveDatatablesHelper(tableSelector, breakpoints, options) {
         hideEmptyColumnsInRowDetail: false,
         clickOn: 'icon',
         showDetail: null,
-        hideDetail: null
+        hideDetail: null,
+        widthReference: "window",
+		customReferenceElement: null,
+		debounceWait: 100,
+		consoleLog: false
     };
 
     // Expand icon template
@@ -266,9 +282,21 @@ ResponsiveDatatablesHelper.prototype.setWindowsResizeHandler = function(bindFlag
 
     if (bindFlag) {
         var that = this;
-        $(window).bind("resize", function () {
-            that.respond();
-        });
+		if ($.debounce && (typeof $.debounce == "function")) {
+			// Use jQuery debounce plugin, if available
+			$(window).bind("resize", $.debounce(this.options.debounceWait, function () {
+				that.respond();
+			}));
+		} else if (_.debounce  && (typeof _.debounce == "function")) {
+			// Use Underscore/Lo-Dash debounce, if available
+			$(window).bind("resize", _.debounce(function () {
+				that.respond();
+			}, this.options.debounceWait));
+		} else {
+			$(window).bind("resize", function () {
+				that.respond();
+			});
+		}
     } else {
         $(window).unbind("resize");
     }
@@ -283,15 +311,25 @@ ResponsiveDatatablesHelper.prototype.respond = function () {
     }
     var that = this;
 
-    // Get new windows width
-    var newWindowWidth = $(window).width();
-
+    // Get new window or table width
+	var newWidth = 0;
+	if ((this.options.widthReference === "custom") && (this.options.customReferenceElement) && (typeof this.options.customReferenceElement.width === 'function')) {
+		newWidth = this.options.customReferenceElement.width();
+		if (this.options.consoleLog && console && (typeof console.log === "function")) console.log("Responding to resize event, using custom reference width: " + newWidth);
+	} else if (this.options.widthReference === "parent") {
+		newWidth = this.tableElement.parent().width();
+		if (this.options.consoleLog && console && (typeof console.log === "function")) console.log("Responding to resize event, using parent width: " + newWidth);
+	} else {
+		newWidth = $(window).width();
+		if (this.options.consoleLog && console && (typeof console.log === "function")) console.log("Responding to resize event, using window width: " + newWidth);
+	}
+
     // Loop through breakpoints to see which columns need to be shown/hidden.
     var newColumnsToHide = [];
 
     for (var prop in this.breakpoints) {
         var element = this.breakpoints[prop];
-        if ((!element.lowerLimit || newWindowWidth > element.lowerLimit) && (!element.upperLimit || newWindowWidth <= element.upperLimit)) {
+        if ((!element.lowerLimit || newWidth > element.lowerLimit) && (!element.upperLimit || newWidth <= element.upperLimit)) {
             this.currentBreakpoint = element.name;
             newColumnsToHide = element.columnsToHide;
         }

files/1.9/js/datatables.responsive.js

@@ -345,7 +345,7 @@ ResponsiveDatatablesHelper.prototype.respond = function () {
         });
     } else {
         this.tableElement.removeClass('has-columns-hidden');
-        $('tr.row-detail').each(function (event) {
+        $('tr.row-detail', this.tableElement).each(function (event) {
             ResponsiveDatatablesHelper.prototype.hideRowDetail(that, $(this).prev());
         });
     }
@@ -368,7 +368,7 @@ ResponsiveDatatablesHelper.prototype.showHideColumns = function () {
 
     // Rebuild details to reflect shown/hidden column changes.
     var that = this;
-    $('tr.row-detail').each(function () {
+    $('tr.row-detail', this.tableElement).each(function () {
         ResponsiveDatatablesHelper.prototype.hideRowDetail(that, $(this).prev());
     });
     if (this.tableElement.hasClass('has-columns-hidden')) {