diff --git a/README.md b/README.md
index 955b6e5..46d2191 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ Add Bootstrap, Datatables-Bootstrap and responsive Datatables helper CSS files.
-
+
```
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.
-
+
```
@@ -56,7 +56,7 @@ Add jQuery, Datatables, Datables-Bootstrap and the responsive Datatables helper
-
+
```
**DataTables 1.10.x and Bootstrap 3.x**
@@ -64,7 +64,7 @@ Add jQuery, Datatables, Datables-Bootstrap and the responsive Datatables helper
-
+
```
## 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.
diff --git a/files/1.10/js/datatables.responsive.js b/files/1.10/js/datatables.responsive.js
index ec677ff..f1ade7f 100644
--- a/files/1.10/js/datatables.responsive.js
+++ b/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;
}
diff --git a/files/1.9/js/datatables.responsive.js b/files/1.9/js/datatables.responsive.js
index 7327010..0bb2b40 100644
--- a/files/1.9/js/datatables.responsive.js
+++ b/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')) {