Azaki
/
Plugins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update datatables.slidingChild.js

Browse Source 
Can now be enabled inside the DataTables initialisation
Allows caller to handle source for child data via callback
Wraps provided child data in a div to allow optional animation (slide up / down)
Additional options:
animateShow: if true, uses jQuery slideDown() function to animate showing child data. If false, uses jQuery show()
animateHide: if true, uses jQuery slideUp() function to animate showing child data. If false, uses jQuery hide()
pull/381/head
Nick 7 years ago committed by GitHub
parent cfe86c4bbe
commit 74395dfa0d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 190 additions and 101 deletions
Show Stats Download Patch File Download Diff File

291
features/slidingChild/datatables.slidingChild.js
Unescape View File

@ -1,117 +1,206 @@
/** /**
* @summary SlidingChild * @summary SlidingChild
* @description Show/Hide child data plug-in * @description Show / Hide row child plugin
* @version 1.0.1 * @version 2.0.0
* @file datatables.slidingChild.js * @file dataTables.slidingChild.js
* @author datahandler (www.datahandler.uk) * @author Nick Adkinson (https://github.com/data-handler)
* @copyright Copyright 2017 datahandler. * @copyright Copyright 2018 Nick Adkinson
*
* License MIT - http://datatables.net/license/mit
*
* This feature plug-in provides functionality for showing and hiding row child
* information in DataTables. This can be particularly useful for displaying
* hierarchical data as a drill-down, or where you wish to convey more information
* about a row than there is space for in the host table.
*
* @example
* $('#myTable').DataTable({
* slidingChild: {
* source: function(parent, response) {
* $.get('/Child/GetByParentId/' + parent.data('id'), response);
* }
* }
* });
*
*/ */
(function ($) { (function( factory ){
'use strict'; if ( typeof define === 'function' && define.amd ) {
var SlidingChild = function (dt, options) { // AMD
var opts = $.extend({}, SlidingChild.defaults, options); define( ['jquery', 'datatables.net'], function ( $ ) {
return factory( $, window, document );
} );
}
else if ( typeof exports === 'object' ) {
// CommonJS
module.exports = function (root, $) {
if ( ! root ) {
root = window;
}
// bind to selector click if ( ! $ || ! $.fn.dataTable ) {
$(dt.table().node(), '> tbody').on('click', opts.selector, function() { $ = require('datatables.net')(root, $).$;
}
return factory( $, root, root.document );
};
}
else {
// Browser
factory( jQuery, document );
}
}(function( $, document ) {
'use strict';
var SlidingChild = function ( dt, options )
{
var table = dt.table();
var sliderElement = document.createElement('div');
sliderElement.className = 'slider';
this.s = $.extend({},
{
dt: dt,
table: $(table.node()),
slider: $(sliderElement)
},
SlidingChild.defaults,
options
);
this._bind();
};
SlidingChild.prototype = {
_bind: function() {
var that = this;
var settings = that.s;
$(settings.table, '> tbody').on('click', settings.selector, function() {
var $this = $(this); var $this = $(this);
var tr = $this.is('tr') ? $this : $this.closest('tr'); var tr = $this.is('tr') ? $this : $this.closest('tr');
if (!tr.is('tr')) { return; } // throw error? if (!tr.is('tr')) { return; } // throw error?
var row = dt.row(tr); var dtRow = settings.dt.row(tr);
toggleChild(row); settings.source( tr, that._response(dtRow) );
}); });
},
function toggleChild (dtRow) { _response: function(dtRow) {
if (dtRow.child.isShown()) { return function( dtRow, childData ) {
closeChild(dtRow); this._toggleChild( dtRow, childData );
}.bind( this, dtRow );
},
_toggleChild: function(dtRow, childData) {
var that = this;
if (dtRow.child.isShown()) {
that._hideChild(dtRow, function() {});
} else {
var settings = that.s;
var existingShownDtRow = settings.dt.row('.shown');
if (existingShownDtRow.length && settings.toggle) {
that._hideChild(existingShownDtRow, that._showChild(dtRow, childData));
} else {
that.__showChild(dtRow, childData);
} }
else { }
var existingShownDtRow = dt.row('.shown'); },
if (existingShownDtRow.length && opts.toggleChild) { _showChild: function(dtRow, data) {
closeChild(existingShownDtRow); return function( dtRow, childData ) {
} this.__showChild( dtRow, childData );
}.bind( this, dtRow, data );
},
__showChild: function(dtRow, data) {
var settings = this.s;
var slider = settings.slider;
showChildData(dtRow); slider.append(data);
} dtRow.child(slider, settings.childClass).show();
}
// code borrowed from the resource at: https://datatables.net/blog/2014-10-02
function closeChild (dtRow) {
var showingRow = $(dtRow.node());
$(opts.sliderSelector, dtRow.child()).slideUp(opts.animationSpeed, function () {
dtRow.child.remove();
showingRow.removeClass('shown');
if (opts.onHidden !== null) {
opts.onHidden(dtRow);
}
});
}
function showChildData (dtRow) { if (settings.animateShow) {
if (opts.ajax.requestUrl === null) { this._showChildAnimation(dtRow);
showChildDataFromRow(dtRow); } else {
} this._showChildNoAnimation(dtRow);
else { }
$.ajax({ },
type: opts.ajax.requestType, _showChildAnimation: function(dtRow) {
url: opts.ajax.requestUrl, var selectedRow = $(dtRow.node());
beforeSend: function(xhr, settings) { var settings = this.s;
if (opts.ajax.requestDataCallback) { $(settings.slider, dtRow.child()).slideDown(settings.animationSpeed, function () {
this.data = opts.ajax.requestDataCallback(dtRow); selectedRow.addClass('shown');
} settings.onShown(dtRow);
}, });
contentType: opts.ajax.contentType, },
dataType: opts.ajax.dataType, _showChildNoAnimation: function(dtRow) {
success: function (response) { var selectedRow = $(dtRow.node());
var data = response; var settings = this.s;
if (opts.dataFormatCallback) { $(settings.slider, dtRow.child()).show();
data = opts.dataFormatCallback(response); selectedRow.addClass('shown');
} settings.onShown(dtRow);
showChild(dtRow, data); },
}, _hideChild: function(dtRow, callback) {
error: function (response) { showChild(dtRow, response); } var settings = this.s;
});
} if (settings.animateHide) {
this._hideChildAnimation(dtRow, callback);
} else {
this._hideChildNoAnimation(dtRow, callback);
} }
},
_hideChildAnimation: function(dtRow, callback) {
var settings = this.s;
var showingRow = $(dtRow.node());
var slider = settings.slider;
$(slider, dtRow.child()).slideUp(settings.animationSpeed, function () {
dtRow.child.remove();
showingRow.removeClass('shown');
slider.empty();
settings.onHidden(dtRow);
callback();
});
},
_hideChildNoAnimation: function(dtRow, callback) {
var settings = this.s;
var showingRow = $(dtRow.node());
var slider = settings.slider;
$(slider, dtRow.child()).hide();
dtRow.child.remove();
showingRow.removeClass('shown');
slider.empty();
settings.onHidden(dtRow);
callback();
}
};
function showChildDataFromRow(dtRow) { SlidingChild.defaults = {
if (!opts.dataFormatCallback) { return; } // throw error? selector: "tr",
var data = opts.dataFormatCallback(dtRow); childClass: 'child',
showChild(dtRow, data); source: function() {},
} toggle: true,
animateShow: true,
animateHide: true,
animationSpeed: 200,
onShown: function() {},
onHidden: function() {}
};
function showChild(dtRow, data) {
var selectedRow = $(dtRow.node());
dtRow.child(data, opts.childClass).show();
$(opts.sliderSelector, dtRow.child()).slideDown(opts.animationSpeed, function () { $.fn.dataTable.SlidingChild = SlidingChild;
selectedRow.addClass('shown'); $.fn.DataTable.SlidingChild = SlidingChild;
if (opts.onShown !== null) { // Automatic initialisation listener
opts.onShown(dtRow); $(document).on( 'init.dt', function ( e, settings ) {
} if ( e.namespace !== 'dt' ) {
}); return;
} }
};
var api = new $.fn.dataTable.Api( settings );
SlidingChild.defaults = {
selector: "tr", if ( $( api.table().node() ).hasClass( 'slidingChild' ) ||
toggleChild: true, settings.oInit.slidingChild ||
animationSpeed: 200, $.fn.dataTable.defaults.slidingChild )
ajax: { {
requestType: "GET", new SlidingChild( api, settings.oInit.slidingChild );
requestDataCallback: null, }
requestUrl: null, } );
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
dataType: "json"
}, }));
dataFormatCallback: null,
sliderSelector: 'div.slider',
childClass: null,
onShown: null,
onHidden: null
};
$.fn.dataTable.SlidingChild = SlidingChild;
$.fn.DataTable.SlidingChild = SlidingChild;
}(jQuery));

Write Preview
Loading…
Cancel
Save