effective_datatables 2.6.6 → 2.6.7

data/app/assets/javascripts/dataTables/responsive/dataTables.responsive.js

@@ -0,0 +1,1232 @@
+/*! Responsive 2.1.0
+ * 2014-2016 SpryMedia Ltd - datatables.net/license
+ */
+
+/**
+ * @summary     Responsive
+ * @description Responsive tables plug-in for DataTables
+ * @version     2.1.0
+ * @file        dataTables.responsive.js
+ * @author      SpryMedia Ltd (www.sprymedia.co.uk)
+ * @contact     www.sprymedia.co.uk/contact
+ * @copyright   Copyright 2014-2016 SpryMedia Ltd.
+ *
+ * This source file is free software, available under the following license:
+ *   MIT license - http://datatables.net/license/mit
+ *
+ * This source file is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
+ *
+ * For details please refer to: http://www.datatables.net
+ */
+(function( factory ){
+  if ( typeof define === 'function' && define.amd ) {
+    // AMD
+    define( ['jquery', 'datatables.net'], function ( $ ) {
+      return factory( $, window, document );
+    } );
+  }
+  else if ( typeof exports === 'object' ) {
+    // CommonJS
+    module.exports = function (root, $) {
+      if ( ! root ) {
+        root = window;
+      }
+
+      if ( ! $ || ! $.fn.dataTable ) {
+        $ = require('datatables.net')(root, $).$;
+      }
+
+      return factory( $, root, root.document );
+    };
+  }
+  else {
+    // Browser
+    factory( jQuery, window, document );
+  }
+}(function( $, window, document, undefined ) {
+'use strict';
+var DataTable = $.fn.dataTable;
+
+
+/**
+ * Responsive is a plug-in for the DataTables library that makes use of
+ * DataTables' ability to change the visibility of columns, changing the
+ * visibility of columns so the displayed columns fit into the table container.
+ * The end result is that complex tables will be dynamically adjusted to fit
+ * into the viewport, be it on a desktop, tablet or mobile browser.
+ *
+ * Responsive for DataTables has two modes of operation, which can used
+ * individually or combined:
+ *
+ * * Class name based control - columns assigned class names that match the
+ *   breakpoint logic can be shown / hidden as required for each breakpoint.
+ * * Automatic control - columns are automatically hidden when there is no
+ *   room left to display them. Columns removed from the right.
+ *
+ * In additional to column visibility control, Responsive also has built into
+ * options to use DataTables' child row display to show / hide the information
+ * from the table that has been hidden. There are also two modes of operation
+ * for this child row display:
+ *
+ * * Inline - when the control element that the user can use to show / hide
+ *   child rows is displayed inside the first column of the table.
+ * * Column - where a whole column is dedicated to be the show / hide control.
+ *
+ * Initialisation of Responsive is performed by:
+ *
+ * * Adding the class `responsive` or `dt-responsive` to the table. In this case
+ *   Responsive will automatically be initialised with the default configuration
+ *   options when the DataTable is created.
+ * * Using the `responsive` option in the DataTables configuration options. This
+ *   can also be used to specify the configuration options, or simply set to
+ *   `true` to use the defaults.
+ *
+ *  @class
+ *  @param {object} settings DataTables settings object for the host table
+ *  @param {object} [opts] Configuration options
+ *  @requires jQuery 1.7+
+ *  @requires DataTables 1.10.3+
+ *
+ *  @example
+ *      $('#example').DataTable( {
+ *        responsive: true
+ *      } );
+ *    } );
+ */
+var Responsive = function ( settings, opts ) {
+  // Sanity check that we are using DataTables 1.10 or newer
+  if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.3' ) ) {
+    throw 'DataTables Responsive requires DataTables 1.10.3 or newer';
+  }
+
+  this.s = {
+    dt: new DataTable.Api( settings ),
+    columns: [],
+    current: []
+  };
+
+  // Check if responsive has already been initialised on this table
+  if ( this.s.dt.settings()[0].responsive ) {
+    return;
+  }
+
+  // details is an object, but for simplicity the user can give it as a string
+  // or a boolean
+  if ( opts && typeof opts.details === 'string' ) {
+    opts.details = { type: opts.details };
+  }
+  else if ( opts && opts.details === false ) {
+    opts.details = { type: false };
+  }
+  else if ( opts && opts.details === true ) {
+    opts.details = { type: 'inline' };
+  }
+
+  this.c = $.extend( true, {}, Responsive.defaults, DataTable.defaults.responsive, opts );
+  settings.responsive = this;
+  this._constructor();
+};
+
+$.extend( Responsive.prototype, {
+  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+   * Constructor
+   */
+
+  /**
+   * Initialise the Responsive instance
+   *
+   * @private
+   */
+  _constructor: function ()
+  {
+    var that = this;
+    var dt = this.s.dt;
+    var dtPrivateSettings = dt.settings()[0];
+    var oldWindowWidth = $(window).width();
+
+    dt.settings()[0]._responsive = this;
+
+    // Use DataTables' throttle function to avoid processor thrashing on
+    // resize
+    $(window).on( 'resize.dtr orientationchange.dtr', DataTable.util.throttle( function () {
+      // iOS has a bug whereby resize can fire when only scrolling
+      // See: http://stackoverflow.com/questions/8898412
+      var width = $(window).width();
+
+      if ( width !== oldWindowWidth ) {
+        that._resize();
+        oldWindowWidth = width;
+      }
+    } ) );
+
+    // DataTables doesn't currently trigger an event when a row is added, so
+    // we need to hook into its private API to enforce the hidden rows when
+    // new data is added
+    dtPrivateSettings.oApi._fnCallbackReg( dtPrivateSettings, 'aoRowCreatedCallback', function (tr, data, idx) {
+      if ( $.inArray( false, that.s.current ) !== -1 ) {
+        $('td, th', tr).each( function ( i ) {
+          var idx = dt.column.index( 'toData', i );
+
+          if ( that.s.current[idx] === false ) {
+            $(this).css('display', 'none');
+          }
+        } );
+      }
+    } );
+
+    // Destroy event handler
+    dt.on( 'destroy.dtr', function () {
+      dt.off( '.dtr' );
+      $( dt.table().body() ).off( '.dtr' );
+      $(window).off( 'resize.dtr orientationchange.dtr' );
+
+      // Restore the columns that we've hidden
+      $.each( that.s.current, function ( i, val ) {
+        if ( val === false ) {
+          that._setColumnVis( i, true );
+        }
+      } );
+    } );
+
+    // Reorder the breakpoints array here in case they have been added out
+    // of order
+    this.c.breakpoints.sort( function (a, b) {
+      return a.width < b.width ? 1 :
+        a.width > b.width ? -1 : 0;
+    } );
+
+    this._classLogic();
+    this._resizeAuto();
+
+    // Details handler
+    var details = this.c.details;
+
+    if ( details.type !== false ) {
+      that._detailsInit();
+
+      // DataTables will trigger this event on every column it shows and
+      // hides individually
+      dt.on( 'column-visibility.dtr', function (e, ctx, col, vis) {
+        that._classLogic();
+        that._resizeAuto();
+        that._resize();
+      } );
+
+      // Redraw the details box on each draw which will happen if the data
+      // has changed. This is used until DataTables implements a native
+      // `updated` event for rows
+      dt.on( 'draw.dtr', function () {
+        that._redrawChildren();
+      } );
+
+      $(dt.table().node()).addClass( 'dtr-'+details.type );
+    }
+
+    dt.on( 'column-reorder.dtr', function (e, settings, details) {
+      that._classLogic();
+      that._resizeAuto();
+      that._resize();
+    } );
+
+    // Change in column sizes means we need to calc
+    dt.on( 'column-sizing.dtr', function () {
+      that._resizeAuto();
+      that._resize();
+    });
+
+    dt.on( 'init.dtr', function (e, settings, details) {
+      that._resizeAuto();
+      that._resize();
+
+      // If columns were hidden, then DataTables needs to adjust the
+      // column sizing
+      if ( $.inArray( false, that.s.current ) ) {
+        dt.columns.adjust();
+      }
+    } );
+
+    // First pass - draw the table for the current viewport size
+    this._resize();
+  },
+
+
+  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+   * Private methods
+   */
+
+  /**
+   * Calculate the visibility for the columns in a table for a given
+   * breakpoint. The result is pre-determined based on the class logic if
+   * class names are used to control all columns, but the width of the table
+   * is also used if there are columns which are to be automatically shown
+   * and hidden.
+   *
+   * @param  {string} breakpoint Breakpoint name to use for the calculation
+   * @return {array} Array of boolean values initiating the visibility of each
+   *   column.
+   *  @private
+   */
+  _columnsVisiblity: function ( breakpoint )
+  {
+    var dt = this.s.dt;
+    var columns = this.s.columns;
+    var i, ien;
+
+    // Create an array that defines the column ordering based first on the
+    // column's priority, and secondly the column index. This allows the
+    // columns to be removed from the right if the priority matches
+    var order = columns
+      .map( function ( col, idx ) {
+        return {
+          columnIdx: idx,
+          priority: col.priority
+        };
+      } )
+      .sort( function ( a, b ) {
+        if ( a.priority !== b.priority ) {
+          return a.priority - b.priority;
+        }
+        return a.columnIdx - b.columnIdx;
+      } );
+
+    // Class logic - determine which columns are in this breakpoint based
+    // on the classes. If no class control (i.e. `auto`) then `-` is used
+    // to indicate this to the rest of the function
+    var display = $.map( columns, function ( col ) {
+      return col.auto && col.minWidth === null ?
+        false :
+        col.auto === true ?
+          '-' :
+          $.inArray( breakpoint, col.includeIn ) !== -1;
+    } );
+
+    // Auto column control - first pass: how much width is taken by the
+    // ones that must be included from the non-auto columns
+    var requiredWidth = 0;
+    for ( i=0, ien=display.length ; i<ien ; i++ ) {
+      if ( display[i] === true ) {
+        requiredWidth += columns[i].minWidth;
+      }
+    }
+
+    // Second pass, use up any remaining width for other columns. For
+    // scrolling tables we need to subtract the width of the scrollbar. It
+    // may not be requires which makes this sub-optimal, but it would
+    // require another full redraw to make complete use of those extra few
+    // pixels
+    var scrolling = dt.settings()[0].oScroll;
+    var bar = scrolling.sY || scrolling.sX ? scrolling.iBarWidth : 0;
+    var widthAvailable = dt.table().container().offsetWidth - bar;
+    var usedWidth = widthAvailable - requiredWidth;
+
+    // Control column needs to always be included. This makes it sub-
+    // optimal in terms of using the available with, but to stop layout
+    // thrashing or overflow. Also we need to account for the control column
+    // width first so we know how much width is available for the other
+    // columns, since the control column might not be the first one shown
+    for ( i=0, ien=display.length ; i<ien ; i++ ) {
+      if ( columns[i].control ) {
+        usedWidth -= columns[i].minWidth;
+      }
+    }
+
+    // Allow columns to be shown (counting by priority and then right to
+    // left) until we run out of room
+    var empty = false;
+    for ( i=0, ien=order.length ; i<ien ; i++ ) {
+      var colIdx = order[i].columnIdx;
+
+      if ( display[colIdx] === '-' && ! columns[colIdx].control && columns[colIdx].minWidth ) {
+        // Once we've found a column that won't fit we don't let any
+        // others display either, or columns might disappear in the
+        // middle of the table
+        if ( empty || usedWidth - columns[colIdx].minWidth < 0 ) {
+          empty = true;
+          display[colIdx] = false;
+        }
+        else {
+          display[colIdx] = true;
+        }
+
+        usedWidth -= columns[colIdx].minWidth;
+      }
+    }
+
+    // Determine if the 'control' column should be shown (if there is one).
+    // This is the case when there is a hidden column (that is not the
+    // control column). The two loops look inefficient here, but they are
+    // trivial and will fly through. We need to know the outcome from the
+    // first , before the action in the second can be taken
+    var showControl = false;
+
+    for ( i=0, ien=columns.length ; i<ien ; i++ ) {
+      if ( ! columns[i].control && ! columns[i].never && ! display[i] ) {
+        showControl = true;
+        break;
+      }
+    }
+
+    for ( i=0, ien=columns.length ; i<ien ; i++ ) {
+      if ( columns[i].control ) {
+        display[i] = showControl;
+      }
+    }
+
+    // Finally we need to make sure that there is at least one column that
+    // is visible
+    if ( $.inArray( true, display ) === -1 ) {
+      display[0] = true;
+    }
+
+    return display;
+  },
+
+
+  /**
+   * Create the internal `columns` array with information about the columns
+   * for the table. This includes determining which breakpoints the column
+   * will appear in, based upon class names in the column, which makes up the
+   * vast majority of this method.
+   *
+   * @private
+   */
+  _classLogic: function ()
+  {
+    var that = this;
+    var calc = {};
+    var breakpoints = this.c.breakpoints;
+    var dt = this.s.dt;
+    var columns = dt.columns().eq(0).map( function (i) {
+      var column = this.column(i);
+      var className = column.header().className;
+      var priority = dt.settings()[0].aoColumns[i].responsivePriority;
+
+      if ( priority === undefined ) {
+        var dataPriority = $(column.header()).data('priority');
+
+        priority = dataPriority !== undefined ?
+          dataPriority * 1 :
+          10000;
+      }
+
+      return {
+        className: className,
+        includeIn: [],
+        auto:      false,
+        control:   false,
+        never:     className.match(/\bnever\b/) ? true : false,
+        priority:  priority
+      };
+    } );
+
+    // Simply add a breakpoint to `includeIn` array, ensuring that there are
+    // no duplicates
+    var add = function ( colIdx, name ) {
+      var includeIn = columns[ colIdx ].includeIn;
+
+      if ( $.inArray( name, includeIn ) === -1 ) {
+        includeIn.push( name );
+      }
+    };
+
+    var column = function ( colIdx, name, operator, matched ) {
+      var size, i, ien;
+
+      if ( ! operator ) {
+        columns[ colIdx ].includeIn.push( name );
+      }
+      else if ( operator === 'max-' ) {
+        // Add this breakpoint and all smaller
+        size = that._find( name ).width;
+
+        for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
+          if ( breakpoints[i].width <= size ) {
+            add( colIdx, breakpoints[i].name );
+          }
+        }
+      }
+      else if ( operator === 'min-' ) {
+        // Add this breakpoint and all larger
+        size = that._find( name ).width;
+
+        for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
+          if ( breakpoints[i].width >= size ) {
+            add( colIdx, breakpoints[i].name );
+          }
+        }
+      }
+      else if ( operator === 'not-' ) {
+        // Add all but this breakpoint
+        for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
+          if ( breakpoints[i].name.indexOf( matched ) === -1 ) {
+            add( colIdx, breakpoints[i].name );
+          }
+        }
+      }
+    };
+
+    // Loop over each column and determine if it has a responsive control
+    // class
+    columns.each( function ( col, i ) {
+      var classNames = col.className.split(' ');
+      var hasClass = false;
+
+      // Split the class name up so multiple rules can be applied if needed
+      for ( var k=0, ken=classNames.length ; k<ken ; k++ ) {
+        var className = $.trim( classNames[k] );
+
+        if ( className === 'all' ) {
+          // Include in all
+          hasClass = true;
+          col.includeIn = $.map( breakpoints, function (a) {
+            return a.name;
+          } );
+          return;
+        }
+        else if ( className === 'none' || col.never ) {
+          // Include in none (default) and no auto
+          hasClass = true;
+          return;
+        }
+        else if ( className === 'control' ) {
+          // Special column that is only visible, when one of the other
+          // columns is hidden. This is used for the details control
+          hasClass = true;
+          col.control = true;
+          return;
+        }
+
+        $.each( breakpoints, function ( j, breakpoint ) {
+          // Does this column have a class that matches this breakpoint?
+          var brokenPoint = breakpoint.name.split('-');
+          var re = new RegExp( '(min\\-|max\\-|not\\-)?('+brokenPoint[0]+')(\\-[_a-zA-Z0-9])?' );
+          var match = className.match( re );
+
+          if ( match ) {
+            hasClass = true;
+
+            if ( match[2] === brokenPoint[0] && match[3] === '-'+brokenPoint[1] ) {
+              // Class name matches breakpoint name fully
+              column( i, breakpoint.name, match[1], match[2]+match[3] );
+            }
+            else if ( match[2] === brokenPoint[0] && ! match[3] ) {
+              // Class name matched primary breakpoint name with no qualifier
+              column( i, breakpoint.name, match[1], match[2] );
+            }
+          }
+        } );
+      }
+
+      // If there was no control class, then automatic sizing is used
+      if ( ! hasClass ) {
+        col.auto = true;
+      }
+    } );
+
+    this.s.columns = columns;
+  },
+
+
+  /**
+   * Show the details for the child row
+   *
+   * @param  {DataTables.Api} row    API instance for the row
+   * @param  {boolean}        update Update flag
+   * @private
+   */
+  _detailsDisplay: function ( row, update )
+  {
+    var that = this;
+    var dt = this.s.dt;
+    var details = this.c.details;
+
+    if ( details && details.type !== false ) {
+      var res = details.display( row, update, function () {
+        return details.renderer(
+          dt, row[0], that._detailsObj(row[0])
+        );
+      } );
+
+      if ( res === true || res === false ) {
+        $(dt.table().node()).triggerHandler( 'responsive-display.dt', [dt, row, res, update] );
+      }
+    }
+  },
+
+
+  /**
+   * Initialisation for the details handler
+   *
+   * @private
+   */
+  _detailsInit: function ()
+  {
+    var that    = this;
+    var dt      = this.s.dt;
+    var details = this.c.details;
+
+    // The inline type always uses the first child as the target
+    if ( details.type === 'inline' ) {
+      details.target = 'td:first-child, th:first-child';
+    }
+
+    // Keyboard accessibility
+    dt.on( 'draw.dtr', function () {
+      that._tabIndexes();
+    } );
+    that._tabIndexes(); // Initial draw has already happened
+
+    $( dt.table().body() ).on( 'keyup.dtr', 'td, th', function (e) {
+      if ( e.keyCode === 13 && $(this).data('dtr-keyboard') ) {
+        $(this).click();
+      }
+    } );
+
+    // type.target can be a string jQuery selector or a column index
+    var target   = details.target;
+    var selector = typeof target === 'string' ? target : 'td, th';
+
+    // Click handler to show / hide the details rows when they are available
+    $( dt.table().body() )
+      .on( 'click.dtr mousedown.dtr mouseup.dtr', selector, function (e) {
+        // If the table is not collapsed (i.e. there is no hidden columns)
+        // then take no action
+        if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
+          return;
+        }
+
+        // Check that the row is actually a DataTable's controlled node
+        if ( ! dt.row( $(this).closest('tr') ).length ) {
+          return;
+        }
+
+        // For column index, we determine if we should act or not in the
+        // handler - otherwise it is already okay
+        if ( typeof target === 'number' ) {
+          var targetIdx = target < 0 ?
+            dt.columns().eq(0).length + target :
+            target;
+
+          if ( dt.cell( this ).index().column !== targetIdx ) {
+            return;
+          }
+        }
+
+        // $().closest() includes itself in its check
+        var row = dt.row( $(this).closest('tr') );
+
+        // Check event type to do an action
+        if ( e.type === 'click' ) {
+          // The renderer is given as a function so the caller can execute it
+          // only when they need (i.e. if hiding there is no point is running
+          // the renderer)
+          that._detailsDisplay( row, false );
+        }
+        else if ( e.type === 'mousedown' ) {
+          // For mouse users, prevent the focus ring from showing
+          $(this).css('outline', 'none');
+        }
+        else if ( e.type === 'mouseup' ) {
+          // And then re-allow at the end of the click
+          $(this).blur().css('outline', '');
+        }
+      } );
+  },
+
+
+  /**
+   * Get the details to pass to a renderer for a row
+   * @param  {int} rowIdx Row index
+   * @private
+   */
+  _detailsObj: function ( rowIdx )
+  {
+    var that = this;
+    var dt = this.s.dt;
+
+    return $.map( this.s.columns, function( col, i ) {
+      // Never and control columns should not be passed to the renderer
+      if ( col.never || col.control ) {
+        return;
+      }
+
+      return {
+        title:       dt.settings()[0].aoColumns[ i ].sTitle,
+        data:        dt.cell( rowIdx, i ).render( that.c.orthogonal ),
+        hidden:      dt.column( i ).visible() && !that.s.current[ i ],
+        columnIndex: i,
+        rowIndex:    rowIdx
+      };
+    } );
+  },
+
+
+  /**
+   * Find a breakpoint object from a name
+   *
+   * @param  {string} name Breakpoint name to find
+   * @return {object}      Breakpoint description object
+   * @private
+   */
+  _find: function ( name )
+  {
+    var breakpoints = this.c.breakpoints;
+
+    for ( var i=0, ien=breakpoints.length ; i<ien ; i++ ) {
+      if ( breakpoints[i].name === name ) {
+        return breakpoints[i];
+      }
+    }
+  },
+
+
+  /**
+   * Re-create the contents of the child rows as the display has changed in
+   * some way.
+   *
+   * @private
+   */
+  _redrawChildren: function ()
+  {
+    var that = this;
+    var dt = this.s.dt;
+
+    dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
+      var row = dt.row( idx );
+
+      that._detailsDisplay( dt.row( idx ), true );
+    } );
+  },
+
+
+  /**
+   * Alter the table display for a resized viewport. This involves first
+   * determining what breakpoint the window currently is in, getting the
+   * column visibilities to apply and then setting them.
+   *
+   * @private
+   */
+  _resize: function ()
+  {
+    var that = this;
+    var dt = this.s.dt;
+    var width = $(window).width();
+    var breakpoints = this.c.breakpoints;
+    var breakpoint = breakpoints[0].name;
+    var columns = this.s.columns;
+    var i, ien;
+    var oldVis = this.s.current.slice();
+
+    // Determine what breakpoint we are currently at
+    for ( i=breakpoints.length-1 ; i>=0 ; i-- ) {
+      if ( width <= breakpoints[i].width ) {
+        breakpoint = breakpoints[i].name;
+        break;
+      }
+    }
+
+    // Show the columns for that break point
+    var columnsVis = this._columnsVisiblity( breakpoint );
+    this.s.current = columnsVis;
+
+    // Set the class before the column visibility is changed so event
+    // listeners know what the state is. Need to determine if there are
+    // any columns that are not visible but can be shown
+    var collapsedClass = false;
+    for ( i=0, ien=columns.length ; i<ien ; i++ ) {
+      if ( columnsVis[i] === false && ! columns[i].never && ! columns[i].control ) {
+        collapsedClass = true;
+        break;
+      }
+    }
+
+    $( dt.table().node() ).toggleClass( 'collapsed', collapsedClass );
+
+    var changed = false;
+
+    dt.columns().eq(0).each( function ( colIdx, i ) {
+      if ( columnsVis[i] !== oldVis[i] ) {
+        changed = true;
+        that._setColumnVis( colIdx, columnsVis[i] );
+      }
+    } );
+
+    if ( changed ) {
+      this._redrawChildren();
+
+      // Inform listeners of the change
+      $(dt.table().node()).trigger( 'responsive-resize.dt', [dt, this.s.current] );
+    }
+  },
+
+
+  /**
+   * Determine the width of each column in the table so the auto column hiding
+   * has that information to work with. This method is never going to be 100%
+   * perfect since column widths can change slightly per page, but without
+   * seriously compromising performance this is quite effective.
+   *
+   * @private
+   */
+  _resizeAuto: function ()
+  {
+    var dt = this.s.dt;
+    var columns = this.s.columns;
+
+    // Are we allowed to do auto sizing?
+    if ( ! this.c.auto ) {
+      return;
+    }
+
+    // Are there any columns that actually need auto-sizing, or do they all
+    // have classes defined
+    if ( $.inArray( true, $.map( columns, function (c) { return c.auto; } ) ) === -1 ) {
+      return;
+    }
+
+    // Clone the table with the current data in it
+    var tableWidth   = dt.table().node().offsetWidth;
+    var columnWidths = dt.columns;
+    var clonedTable  = dt.table().node().cloneNode( false );
+    var clonedHeader = $( dt.table().header().cloneNode( false ) ).appendTo( clonedTable );
+    var clonedBody   = $( dt.table().body() ).clone( false, false ).empty().appendTo( clonedTable ); // use jQuery because of IE8
+
+    // Header
+    var headerCells = dt.columns()
+      .header()
+      .filter( function (idx) {
+        return dt.column(idx).visible();
+      } )
+      .to$()
+      .clone( false )
+      .css( 'display', 'table-cell' );
+
+    // Body rows - we don't need to take account of DataTables' column
+    // visibility since we implement our own here (hence the `display` set)
+    $(clonedBody)
+      .append( $(dt.rows( { page: 'current' } ).nodes()).clone( false ) )
+      .find( 'th, td' ).css( 'display', '' );
+
+    // Footer
+    var footer = dt.table().footer();
+    if ( footer ) {
+      var clonedFooter = $( footer.cloneNode( false ) ).appendTo( clonedTable );
+      var footerCells = dt.columns()
+        .footer()
+        .filter( function (idx) {
+          return dt.column(idx).visible();
+        } )
+        .to$()
+        .clone( false )
+        .css( 'display', 'table-cell' );
+
+      $('<tr/>')
+        .append( footerCells )
+        .appendTo( clonedFooter );
+    }
+
+    $('<tr/>')
+      .append( headerCells )
+      .appendTo( clonedHeader );
+
+    // In the inline case extra padding is applied to the first column to
+    // give space for the show / hide icon. We need to use this in the
+    // calculation
+    if ( this.c.details.type === 'inline' ) {
+      $(clonedTable).addClass( 'dtr-inline collapsed' );
+    }
+
+    // It is unsafe to insert elements with the same name into the DOM
+    // multiple times. For example, cloning and inserting a checked radio
+    // clears the chcecked state of the original radio.
+    $( clonedTable ).find( '[name]' ).removeAttr( 'name' );
+
+    var inserted = $('<div/>')
+      .css( {
+        width: 1,
+        height: 1,
+        overflow: 'hidden'
+      } )
+      .append( clonedTable );
+
+    inserted.insertBefore( dt.table().node() );
+
+    // The cloned header now contains the smallest that each column can be
+    headerCells.each( function (i) {
+      var idx = dt.column.index( 'fromVisible', i );
+      columns[ idx ].minWidth =  this.offsetWidth || 0;
+    } );
+
+    inserted.remove();
+  },
+
+  /**
+   * Set a column's visibility.
+   *
+   * We don't use DataTables' column visibility controls in order to ensure
+   * that column visibility can Responsive can no-exist. Since only IE8+ is
+   * supported (and all evergreen browsers of course) the control of the
+   * display attribute works well.
+   *
+   * @param {integer} col      Column index
+   * @param {boolean} showHide Show or hide (true or false)
+   * @private
+   */
+  _setColumnVis: function ( col, showHide )
+  {
+    var dt = this.s.dt;
+    var display = showHide ? '' : 'none'; // empty string will remove the attr
+
+    $( dt.column( col ).header() ).css( 'display', display );
+    $( dt.column( col ).footer() ).css( 'display', display );
+    dt.column( col ).nodes().to$().css( 'display', display );
+  },
+
+
+  /**
+   * Update the cell tab indexes for keyboard accessibility. This is called on
+   * every table draw - that is potentially inefficient, but also the least
+   * complex option given that column visibility can change on the fly. Its a
+   * shame user-focus was removed from CSS 3 UI, as it would have solved this
+   * issue with a single CSS statement.
+   *
+   * @private
+   */
+  _tabIndexes: function ()
+  {
+    var dt = this.s.dt;
+    var cells = dt.cells( { page: 'current' } ).nodes().to$();
+    var ctx = dt.settings()[0];
+    var target = this.c.details.target;
+
+    cells.filter( '[data-dtr-keyboard]' ).removeData( '[data-dtr-keyboard]' );
+
+    var selector = typeof target === 'number' ?
+      ':eq('+target+')' :
+      target;
+
+    $( selector, dt.rows( { page: 'current' } ).nodes() )
+      .attr( 'tabIndex', ctx.iTabIndex )
+      .data( 'dtr-keyboard', 1 );
+  }
+} );
+
+
+/**
+ * List of default breakpoints. Each item in the array is an object with two
+ * properties:
+ *
+ * * `name` - the breakpoint name.
+ * * `width` - the breakpoint width
+ *
+ * @name Responsive.breakpoints
+ * @static
+ */
+Responsive.breakpoints = [
+  { name: 'desktop',  width: Infinity },
+  { name: 'tablet-l', width: 1024 },
+  { name: 'tablet-p', width: 768 },
+  { name: 'mobile-l', width: 480 },
+  { name: 'mobile-p', width: 320 }
+];
+
+
+/**
+ * Display methods - functions which define how the hidden data should be shown
+ * in the table.
+ *
+ * @namespace
+ * @name Responsive.defaults
+ * @static
+ */
+Responsive.display = {
+  childRow: function ( row, update, render ) {
+    if ( update ) {
+      if ( $(row.node()).hasClass('parent') ) {
+        row.child( render(), 'child' ).show();
+
+        return true;
+      }
+    }
+    else {
+      if ( ! row.child.isShown()  ) {
+        row.child( render(), 'child' ).show();
+        $( row.node() ).addClass( 'parent' );
+
+        return true;
+      }
+      else {
+        row.child( false );
+        $( row.node() ).removeClass( 'parent' );
+
+        return false;
+      }
+    }
+  },
+
+  childRowImmediate: function ( row, update, render ) {
+    if ( (! update && row.child.isShown()) || ! row.responsive.hasHidden() ) {
+      // User interaction and the row is show, or nothing to show
+      row.child( false );
+      $( row.node() ).removeClass( 'parent' );
+
+      return false;
+    }
+    else {
+      // Display
+      row.child( render(), 'child' ).show();
+      $( row.node() ).addClass( 'parent' );
+
+      return true;
+    }
+  },
+
+  // This is a wrapper so the modal options for Bootstrap and jQuery UI can
+  // have options passed into them. This specific one doesn't need to be a
+  // function but it is for consistency in the `modal` name
+  modal: function ( options ) {
+    return function ( row, update, render ) {
+      if ( ! update ) {
+        // Show a modal
+        var close = function () {
+          modal.remove(); // will tidy events for us
+          $(document).off( 'keypress.dtr' );
+        };
+
+        var modal = $('<div class="dtr-modal"/>')
+          .append( $('<div class="dtr-modal-display"/>')
+            .append( $('<div class="dtr-modal-content"/>')
+              .append( render() )
+            )
+            .append( $('<div class="dtr-modal-close">&times;</div>' )
+              .click( function () {
+                close();
+              } )
+            )
+          )
+          .append( $('<div class="dtr-modal-background"/>')
+            .click( function () {
+              close();
+            } )
+          )
+          .appendTo( 'body' );
+
+        $(document).on( 'keyup.dtr', function (e) {
+          if ( e.keyCode === 27 ) {
+            e.stopPropagation();
+
+            close();
+          }
+        } );
+      }
+      else {
+        $('div.dtr-modal-content')
+          .empty()
+          .append( render() );
+      }
+
+      if ( options && options.header ) {
+        $('div.dtr-modal-content').prepend(
+          '<h2>'+options.header( row )+'</h2>'
+        );
+      }
+    };
+  }
+};
+
+
+/**
+ * Display methods - functions which define how the hidden data should be shown
+ * in the table.
+ *
+ * @namespace
+ * @name Responsive.defaults
+ * @static
+ */
+Responsive.renderer = {
+  listHidden: function () {
+    return function ( api, rowIdx, columns ) {
+      var data = $.map( columns, function ( col ) {
+        return col.hidden ?
+          '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
+            '<span class="dtr-title">'+
+              col.title+
+            '</span> '+
+            '<span class="dtr-data">'+
+              col.data+
+            '</span>'+
+          '</li>' :
+          '';
+      } ).join('');
+
+      return data ?
+        $('<ul data-dtr-index="'+rowIdx+'"/>').append( data ) :
+        false;
+    }
+  },
+
+  tableAll: function ( options ) {
+    options = $.extend( {
+      tableClass: ''
+    }, options );
+
+    return function ( api, rowIdx, columns ) {
+      var data = $.map( columns, function ( col ) {
+        return '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
+            '<td>'+col.title+':'+'</td> '+
+            '<td>'+col.data+'</td>'+
+          '</tr>';
+      } ).join('');
+
+      return $('<table class="'+options.tableClass+'" width="100%"/>').append( data );
+    }
+  }
+};
+
+/**
+ * Responsive default settings for initialisation
+ *
+ * @namespace
+ * @name Responsive.defaults
+ * @static
+ */
+Responsive.defaults = {
+  /**
+   * List of breakpoints for the instance. Note that this means that each
+   * instance can have its own breakpoints. Additionally, the breakpoints
+   * cannot be changed once an instance has been creased.
+   *
+   * @type {Array}
+   * @default Takes the value of `Responsive.breakpoints`
+   */
+  breakpoints: Responsive.breakpoints,
+
+  /**
+   * Enable / disable auto hiding calculations. It can help to increase
+   * performance slightly if you disable this option, but all columns would
+   * need to have breakpoint classes assigned to them
+   *
+   * @type {Boolean}
+   * @default  `true`
+   */
+  auto: true,
+
+  /**
+   * Details control. If given as a string value, the `type` property of the
+   * default object is set to that value, and the defaults used for the rest
+   * of the object - this is for ease of implementation.
+   *
+   * The object consists of the following properties:
+   *
+   * * `display` - A function that is used to show and hide the hidden details
+   * * `renderer` - function that is called for display of the child row data.
+   *   The default function will show the data from the hidden columns
+   * * `target` - Used as the selector for what objects to attach the child
+   *   open / close to
+   * * `type` - `false` to disable the details display, `inline` or `column`
+   *   for the two control types
+   *
+   * @type {Object|string}
+   */
+  details: {
+    display: Responsive.display.childRow,
+
+    renderer: Responsive.renderer.listHidden(),
+
+    target: 0,
+
+    type: 'inline'
+  },
+
+  /**
+   * Orthogonal data request option. This is used to define the data type
+   * requested when Responsive gets the data to show in the child row.
+   *
+   * @type {String}
+   */
+  orthogonal: 'display'
+};
+
+
+/*
+ * API
+ */
+var Api = $.fn.dataTable.Api;
+
+// Doesn't do anything - work around for a bug in DT... Not documented
+Api.register( 'responsive()', function () {
+  return this;
+} );
+
+Api.register( 'responsive.index()', function ( li ) {
+  li = $(li);
+
+  return {
+    column: li.data('dtr-index'),
+    row:    li.parent().data('dtr-index')
+  };
+} );
+
+Api.register( 'responsive.rebuild()', function () {
+  return this.iterator( 'table', function ( ctx ) {
+    if ( ctx._responsive ) {
+      ctx._responsive._classLogic();
+    }
+  } );
+} );
+
+Api.register( 'responsive.recalc()', function () {
+  return this.iterator( 'table', function ( ctx ) {
+    if ( ctx._responsive ) {
+      ctx._responsive._resizeAuto();
+      ctx._responsive._resize();
+    }
+  } );
+} );
+
+Api.register( 'responsive.hasHidden()', function () {
+  var ctx = this.context[0];
+
+  return ctx._responsive ?
+    $.inArray( false, ctx._responsive.s.current ) !== -1 :
+    false;
+} );
+
+
+/**
+ * Version information
+ *
+ * @name Responsive.version
+ * @static
+ */
+Responsive.version = '2.1.0';
+
+
+$.fn.dataTable.Responsive = Responsive;
+$.fn.DataTable.Responsive = Responsive;
+
+// Attach a listener to the document which listens for DataTables initialisation
+// events so we can automatically initialise
+$(document).on( 'preInit.dt.dtr', function (e, settings, json) {
+  if ( e.namespace !== 'dt' ) {
+    return;
+  }
+
+  if ( $(settings.nTable).hasClass( 'responsive' ) ||
+     $(settings.nTable).hasClass( 'dt-responsive' ) ||
+     settings.oInit.responsive ||
+     DataTable.defaults.responsive
+  ) {
+    var init = settings.oInit.responsive;
+
+    if ( init !== false ) {
+      new Responsive( settings, $.isPlainObject( init ) ? init : {}  );
+    }
+  }
+} );
+
+
+return Responsive;
+}));