diff --git a/features/slidingChild/datatables.slidingChild.js b/features/slidingChild/datatables.slidingChild.js index 10951ad..2c23b65 100644 --- a/features/slidingChild/datatables.slidingChild.js +++ b/features/slidingChild/datatables.slidingChild.js @@ -1,7 +1,7 @@ /** * @summary SlidingChild * @description Show / Hide row child plugin - * @version 2.0.1 + * @version 2.0.2 * @file dataTables.slidingChild.js * @author Nick Adkinson (https://github.com/data-handler) * @copyright Copyright 2018 Nick Adkinson @@ -107,7 +107,11 @@ SlidingChild.prototype = { }.bind( this, dtRow ); }, _showChild: function(dtRow) { - this.s.source( $(dtRow.node() ), this._response(dtRow) ); + var $tr = $(dtRow.node()); + if (this.s.displayLoadingIndicator) { + this._addLoadingIndicator($tr); + } + this.s.source( $tr, this._response(dtRow) ); }, _response: function(dtRow) { return function( dtRow, childData ) { @@ -117,11 +121,16 @@ SlidingChild.prototype = { __showChild: function(dtRow, data) { var settings = this.s; var slider = settings.slider; + var $tr = $(dtRow.node()); + + if (settings.displayLoadingIndicator) { + $('.'+this.s.loadingIndicatorClass).remove(); + } slider.append(data); dtRow.child(slider, settings.childClass).show(); - $(dtRow.node()).toggleClass('shown'); + $tr.toggleClass('shown'); this._updateFadedRows(); if (settings.animateShow) { @@ -204,6 +213,16 @@ SlidingChild.prototype = { .to$() .css('opacity', 1) .removeClass('faded'); + }, + _addLoadingIndicator: function($tr) { + var position = $tr.position(); + var indicator = $(this.s.loadingIndicatorContent); + indicator.addClass(this.s.loadingIndicatorClass); + indicator.css('top', position.top); + indicator.css('left', position.left); + indicator.css('height', $tr.height()); + + $tr.append(indicator); } }; @@ -218,7 +237,10 @@ SlidingChild.defaults = { fadeOpacity: 0.4, animationSpeed: 200, onShown: function() {}, - onHidden: function() {} + onHidden: function() {}, + displayLoadingIndicator: false, + loadingIndicatorClass: 'loading-indicator', + loadingIndicatorContent: '
Loading...
' };