Feature: Create sliding-child.js

Merge pull request #315 from data-handler/patch-1

features/slidingChild/js/sliding-child.js

@@ -0,0 +1,128 @@
+/**
+ * @summary     SlidingChild
+ * @description Plug-in to show/hide row child data
+ * @version     1.0.0
+ * @file        slidingchild.js
+ * @author      datahandler (www.datahandler.uk)
+ * @copyright   Copyright datahandler (www.datahandler.uk)
+ * 
+ * License      MIT - http://datatables.net/license/mit
+ */
+
+/**
+ * Example usage
+ * @example
+ * var table = $('#table_id').DataTable();
+ * slidingChild =
+ *     new $.fn.dataTable.SlidingChild(table, {
+ *         ajax: {
+ *             requestType: 'POST',
+ *             requestUrl: '/Home/GetChildData',
+ *             dataType: 'HTML',
+ *             requestDataCallback: myRequestDataCallback
+ *         }
+ *     });
+ */
+(function ($) {
+    var SlidingChild = function (dt, options) {
+        var opts = $.extend({}, SlidingChild.defaults, options);
+
+        // bind to selector click
+        $(opts.selector).on('click', function () {
+            var $this = $(this);
+            var dtRow = $this.is('tr') ? $this : $this.closest('tr');
+
+            if (!dtRow.is('tr')) { return; } // throw error?
+            // check row belongs to this table?
+
+            dtRow = dt.row(dtRow);
+            toggleChild(dtRow);
+        });
+
+        var toggleChild = function (dtRow) {
+            // if child already showing, close it.
+            if (dtRow.child.isShown()) {
+                closeChild(dtRow);
+            }
+            else {
+                // closes existing showing child, if any
+                if (opts.toggleChild) closeChild(dt.row('.shown'));
+
+                showChildData(dtRow);
+            }
+        };
+        // code borrowed from the resource at: https://datatables.net/blog/2014-10-02
+        var closeChild = function (dtRow) {
+            if (dtRow) {
+                var showingRow = $(dtRow.node());
+                $(opts.sliderSelector, dtRow.child()).slideUp(function () {
+                    dtRow.child.remove();
+                    showingRow.removeClass('shown');
+                    $(dt.table().node()).trigger('childClosed', [dtRow]);
+                });
+            }
+        };
+
+        var showChildData = function (dtRow) {
+            if (opts.useRowData) {
+                showChildDataFromRow(dtRow);
+            }
+            else {
+                $.ajax({
+                    type: opts.ajax.requestType,
+                    url: opts.ajax.requestUrl,
+                    beforeSend: function(xhr, settings) {
+                        if (opts.ajax.requestDataCallback) {
+                            this.data = opts.ajax.requestDataCallback(dtRow);
+                        }
+                    },
+                    contentType: opts.ajax.contentType,
+                    dataType: opts.ajax.dataType,
+                    success: function (response) {
+                        var data = response;
+                        if (opts.dataFormatCallback) {
+                            data = opts.dataFormatCallback(response);
+                        }
+                        showChild(dtRow, data);
+                    },
+                    error: function (response) { showChild(dtRow, response); }
+                });
+            }
+        };
+
+        var showChildDataFromRow = function(dtRow) {
+            if (!opts.dataFormatCallback) { return; } // throw error?
+            var data = opts.dataFormatCallback(dtRow.data());
+            showChild(dtRow, data);
+        }
+
+        var showChild = function(dtRow, data) {
+            var selectedRow = $(dtRow.node());
+            dtRow.child(data).show();
+
+            $(opts.sliderSelector, dtRow.child()).slideDown(function () {
+                selectedRow.addClass('shown');
+
+                $(dt.table().node()).trigger('childShown', [dtRow]);
+            });
+        };
+    };
+
+    SlidingChild.defaults = {
+        selector: "tr",
+        toggleChild: false,
+        useRowData: false,
+        ajax: {
+            requestType: "GET",
+            requestDataCallback: null,
+            requestUrl: null,
+            contentType: "application/json; charset=utf-8",
+            dataType: "json"
+        },
+        dataFormatCallback: null,
+        sliderSelector: 'div.slider'
+    };
+
+    $.fn.dataTable.SlidingChild = SlidingChild;
+    $.fn.DataTable.SlidingChild = SlidingChild;    
+}(jQuery));