/*! Responsive 2.2.9
* 2014-2021 SpryMedia Ltd - datatables.net/license
*/
/**
* @summary Responsive
* @description Responsive tables plug-in for DataTables
* @version 2.2.9
* @file dataTables.responsive.js
* @author SpryMedia Ltd (www.sprymedia.co.uk)
* @contact www.sprymedia.co.uk/contact
* @copyright Copyright 2014-2021 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.10')) {
throw 'DataTables Responsive requires DataTables 1.10.10 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).innerWidth();
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).innerWidth();
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');
dt.cells('.dtr-control').nodes().to$().removeClass('dtr-control');
// 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 () {
// Use a small debounce to allow multiple columns to be set together
if (that._timer) {
clearTimeout(that._timer);
}
that._timer = setTimeout(function () {
that._timer = null;
that._classLogic();
that._resizeAuto();
that._resize(true);
that._redrawChildren();
}, 100);
});
// 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(true);
});
// Change in column sizes means we need to calc
dt.on('column-sizing.dtr', function () {
that._resizeAuto();
that._resize();
});
// On Ajax reload we want to reopen any child rows which are displayed
// by responsive
dt.on('preXhr.dtr', function () {
var rowIds = [];
dt.rows().every(function () {
if (this.child.isShown()) {
rowIds.push(this.id(true));
}
});
dt.one('draw.dtr', function () {
that._resizeAuto();
that._resize();
dt.rows(rowIds).every(function () {
that._detailsDisplay(this, false);
});
});
});
dt.on('draw.dtr', function () {
that._controlClass();
}).on('init.dtr', function (e, settings, details) {
if (e.namespace !== 'dt') {
return;
}
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, i) {
if (dt.column(i).visible() === false) {
return 'not-visible';
}
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] === false) {
showControl = true;
break;
}
}
for (i = 0, ien = columns.length; i < ien; i++) {
if (columns[i].control) {
display[i] = showControl;
}
// Replace not visible string with false from the control column detection above
if (display[i] === 'not-visible') {
display[i] = false;
}
}
// 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;
var dataPriority = column.header().getAttribute('data-priority');
if (priority === undefined) {
priority = dataPriority === undefined || dataPriority === null ? 10000 : dataPriority * 1;
}
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 = classNames[k].trim();
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' || className === 'dtr-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;
},
/**
* Update the cells to show the correct control class / button
* @private
*/
_controlClass: function () {
if (this.c.details.type === 'inline') {
var dt = this.s.dt;
var columnsVis = this.s.current;
var firstVisible = $.inArray(true, columnsVis);
// Remove from any cells which shouldn't have it
dt.cells(
null,
function (idx) {
return idx !== firstVisible;
},
{ page: 'current' }
)
.nodes()
.to$()
.filter('.dtr-control')
.removeClass('dtr-control');
dt.cells(null, firstVisible, { page: 'current' }).nodes().to$().addClass('dtr-control');
}
},
/**
* 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.dtr-control, th.dtr-control';
}
// 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';
if (target !== undefined || target !== null) {
// 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 ($.inArray($(this).closest('tr').get(0), dt.rows().nodes().toArray()) === -1) {
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).trigger('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;
}
var dtCol = dt.settings()[0].aoColumns[i];
return {
className: dtCol.sClass,
columnIndex: i,
data: dt.cell(rowIdx, i).render(that.c.orthogonal),
hidden: dt.column(i).visible() && !that.s.current[i],
rowIndex: rowIdx,
title: dtCol.sTitle !== null ? dtCol.sTitle : $(dt.column(i).header()).text()
};
});
},
/**
* 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.
*
* @param {boolean} forceRedraw Force a redraw
* @private
*/
_resize: function (forceRedraw) {
var that = this;
var dt = this.s.dt;
var width = $(window).innerWidth();
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 && !dt.column(i).visible() === false) {
collapsedClass = true;
break;
}
}
$(dt.table().node()).toggleClass('collapsed', collapsedClass);
var changed = false;
var visible = 0;
dt.columns()
.eq(0)
.each(function (colIdx, i) {
if (columnsVis[i] === true) {
visible++;
}
if (forceRedraw || 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]);
// If no records, update the "No records" display element
if (dt.page.info().recordsDisplay === 0) {
$('td', dt.table().body()).eq(0).attr('colspan', visible);
}
}
that._controlClass();
},
/**
* 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;
}
// Need to restore all children. They will be reinstated by a re-render
if (!$.isEmptyObject(_childNodeStore)) {
$.each(_childNodeStore, function (key) {
var idx = key.split('-');
_childNodesRestore(dt, idx[0] * 1, idx[1] * 1);
});
}
// 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
clonedTable.style.width = 'auto';
// Header
var headerCells = dt
.columns()
.header()
.filter(function (idx) {
return dt.column(idx).visible();
})
.to$()
.clone(false)
.css('display', 'table-cell')
.css('width', 'auto')
.css('min-width', 0);
// 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');
// A position absolute table would take the table out of the flow of
// our container element, bypassing the height and width (Scroller)
$(clonedTable).css('position', 'relative');
var inserted = $('<div/>')
.css({
width: 1,
height: 1,
overflow: 'hidden',
clear: 'both'
})
.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();
},
/**
* Get the state of the current hidden columns - controlled by Responsive only
*/
_responsiveOnlyHidden: function () {
var dt = this.s.dt;
return $.map(this.s.current, function (v, i) {
// If the column is hidden by DataTables then it can't be hidden by
// Responsive!
if (dt.column(i).visible() === false) {
return true;
}
return v;
});
},
/**
* 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);
// If the are child nodes stored, we might need to reinsert them
if (!$.isEmptyObject(_childNodeStore)) {
dt.cells(null, col)
.indexes()
.each(function (idx) {
_childNodesRestore(dt, idx.row, idx.column);
});
}
},
/**
* 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]');
if (typeof target === 'number') {
dt.cells(null, target, { page: 'current' })
.nodes()
.to$()
.attr('tabIndex', ctx.iTabIndex)
.data('dtr-keyboard', 1);
} else {
// This is a bit of a hack - we need to limit the selected nodes to just
// those of this table
if (target === 'td:first-child, th:first-child') {
target = '>td:first-child, >th:first-child';
}
$(target, 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">×</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>');
}
};
}
};
var _childNodeStore = {};
function _childNodes(dt, row, col) {
var name = row + '-' + col;
if (_childNodeStore[name]) {
return _childNodeStore[name];
}
// https://jsperf.com/childnodes-array-slice-vs-loop
var nodes = [];
var children = dt.cell(row, col).node().childNodes;
for (var i = 0, ien = children.length; i < ien; i++) {
nodes.push(children[i]);
}
_childNodeStore[name] = nodes;
return nodes;
}
function _childNodesRestore(dt, row, col) {
var name = row + '-' + col;
if (!_childNodeStore[name]) {
return;
}
var node = dt.cell(row, col).node();
var store = _childNodeStore[name];
var parent = store[0].parentNode;
var parentChildren = parent.childNodes;
var a = [];
for (var i = 0, ien = parentChildren.length; i < ien; i++) {
a.push(parentChildren[i]);
}
for (var j = 0, jen = a.length; j < jen; j++) {
node.appendChild(a[j]);
}
_childNodeStore[name] = undefined;
}
/**
* Display methods - functions which define how the hidden data should be shown
* in the table.
*
* @namespace
* @name Responsive.defaults
* @static
*/
Responsive.renderer = {
listHiddenNodes: function () {
return function (api, rowIdx, columns) {
var ul = $('<ul data-dtr-index="' + rowIdx + '" class="dtr-details"/>');
var found = false;
var data = $.each(columns, function (i, col) {
if (col.hidden) {
var klass = col.className ? 'class="' + col.className + '"' : '';
$(
'<li ' +
klass +
' data-dtr-index="' +
col.columnIndex +
'" data-dt-row="' +
col.rowIndex +
'" data-dt-column="' +
col.columnIndex +
'">' +
'<span class="dtr-title">' +
col.title +
'</span> ' +
'</li>'
)
.append($('<span class="dtr-data"/>').append(_childNodes(api, col.rowIndex, col.columnIndex))) // api.cell( col.rowIndex, col.columnIndex ).node().childNodes ) )
.appendTo(ul);
found = true;
}
});
return found ? ul : false;
};
},
listHidden: function () {
return function (api, rowIdx, columns) {
var data = $.map(columns, function (col) {
var klass = col.className ? 'class="' + col.className + '"' : '';
return col.hidden
? '<li ' +
klass +
' 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 + '" class="dtr-details"/>').append(data) : false;
};
},
tableAll: function (options) {
options = $.extend(
{
tableClass: ''
},
options
);
return function (api, rowIdx, columns) {
var data = $.map(columns, function (col) {
var klass = col.className ? 'class="' + col.className + '"' : '';
return (
'<tr ' +
klass +
' 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 + ' dtr-details" 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._responsiveOnlyHidden()) !== -1 : false;
});
Api.registerPlural('columns().responsiveHidden()', 'column().responsiveHidden()', function () {
return this.iterator(
'column',
function (settings, column) {
return settings._responsive ? settings._responsive._responsiveOnlyHidden()[column] : false;
},
1
);
});
/**
* Version information
*
* @name Responsive.version
* @static
*/
Responsive.version = '2.2.9';
$.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;
});