Plugins/features/slidingChild/js/sliding-child.js

/**
 * @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 2014 SpryMedia Ltd.
 * 
 * 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));