row toggle plug in
row toggle plug in
Hello,
I am completely new to this forum and to developing plug-ins, so please go easy on me.
I have followed the 'Sliding child rows' tutorial here and have used this functionality in my own web pages. But it occurred to me that I could create a plug-in to do some of the work for me.
Below is what I have come up with so far. Before I go any further with it (if indeed I do, depending on feedback), I though I'd open it up to the forum for discussion.
(function($) {
var ToggleRow = function ( dt ) {
this.toggle = function( dtRow ) {
// if row already showing, close it.
if (dtRow.child.isShown()) {
this.closeRow( dtRow );
}
else {
showRowData( dtRow );
}
};
// code borrowed from the resource at: https://datatables.net/blog/2014-10-02
this.closeRow = function ( dtRow ) {
var showingRow = $(dtRow.node());
$('div.slider', dtRow.child()).slideUp(function () {
dtRow.child.remove();
showingRow.removeClass('shown');
$(dt.table().node()).trigger('rowClosed', [dtRow]);
});
};
var showRow = this.showRow = function ( dtRow, data ) {
var selectedRow = $(dtRow.node());
dtRow.child(data).show();
$('div.slider', dtRow.child()).slideDown(function () {
selectedRow.addClass('shown');
$(dt.table().node()).trigger('rowShown', [dtRow]);
});
};
// relies on data attributes being present for the row being toggled
var showRowData = function ( dtRow ) {
var row = $(dtRow.node());
var requestType = row.data('request-type') || "GET";
var requestUrl = row.data('request-url');
var requestData = row.data('request-data') || null;
var contentType = row.data('content-type') || "application/json; charset=utf-8";
var dataType = row.data('data-type') || "json";
var callback = row.data('callback');
$.ajax({
type: requestType,
url: requestUrl,
data: requestData,
contentType: contentType,
dataType: dataType,
success: function ( response ) {
var data = response;
if (callback) {
var fn = window[callback];
if (fn) data = fn(response);
}
showRow( dtRow, data );
},
error: function (response) { showRow( dtRow, response ); }
});
};
};
$.fn.dataTable.ToggleRow = ToggleRow;
$.fn.DataTable.ToggleRow = ToggleRow;
}(jQuery));
Thanks in advance to anyone who cares to comment on this endeavour
This question has accepted answers - jump to:
Answers
It would be better to provide a link showing this in action.
Hi tangerine. Thanks for your response. I'll try to get a link sorted this week and post it here
Hi tangerine. As promised, I have made a demo available here:
http://datahandler.uk/
Regards
@Allan: your comments would be far more useful than mine....
I think that looks great - thanks for sharing you work with us. I'm sure others will find it useful. The sliding child rows is something that I know is quite popular.
In terms of suggestions for how to progress this:
selector
type option, which will add the listener automatically for the end user (you'd be surprised how few developers want to add their own listeners!).data-*
attributes obviously works well for your project, but I suspect most people will want to set a specific URL and send, e.g., the row id, to get the child information from a common location.Nice one .
Allan
Hi Allan,
Thanks for the positive feedback and thank you for the suggestions.
I will develop this further and post the results back here.
Nick
Hi Nick,
Would be very happy to include it in the DataTables plug-ins repo if you'd like to send a PR with your code here. A new directory called "slidingChild" or similar (I feel "RowToggle" might be a little too generic, since it could toggle various things and doesn't specifically mention the child row) - but I'll leave it up to you!
The code in the plug-ins repo is all MIT licensed if you are okay with that.
Allan
Hi Allan,
that's brilliant. Will do.
Thank you,
Nick
Hi Allan,
I've sent a pull request, but having never done one before, I'm note sure if I have done it correctly. In case I haven't, I've included the js and css below.
Thanks
Nick