forked from Wavyzz/dolibarr
Last version of JQuery 1.12 and DataTables Componenent with working
export Excel,CVS,PDF, etc..
This commit is contained in:
@@ -1,3 +1,5 @@
|
||||
MIT license
|
||||
|
||||
Copyright (c) 2014-2015 SpryMedia Limited
|
||||
http://datatables.net
|
||||
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
# Responsive
|
||||
|
||||
Responsive will automatically optimise the table's layout for different screen sizes through the dynamic column visibility control, making your tables useful on desktop and mobile screens.
|
||||
|
||||
|
||||
# Installation
|
||||
|
||||
To use Responsive the primary way to obtain the software is to use the [DataTables downloader](//datatables.net/download). You can also include the individual files from the [DataTables CDN](//cdn.datatables.net). See the [documentation](http://datatables.net/extensions/responsive/) for full details.
|
||||
|
||||
## NPM and Bower
|
||||
|
||||
If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name `datatables.net-responsive`. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name.
|
||||
|
||||
Please see the DataTables [NPM](//datatables.net/download/npm) and [Bower](//datatables.net/download/bower) installation pages for further information. The [DataTables installation manual](//datatables.net/manual/installation) also has details on how to use package managers with DataTables.
|
||||
|
||||
|
||||
# Basic usage
|
||||
|
||||
Responsive is initialised using the `responsive` option in the DataTables constructor - a simple boolean `true` will enable the feature. Further options can be specified using this option as an object - see the documentation for details.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
$(document).ready( function () {
|
||||
$('#myTable').DataTable( {
|
||||
responsive: true
|
||||
} );
|
||||
} );
|
||||
```
|
||||
|
||||
|
||||
# Documentation / support
|
||||
|
||||
* [Documentation](https://datatables.net/extensions/responsive/)
|
||||
* [DataTables support forums](http://datatables.net/forums)
|
||||
|
||||
|
||||
# GitHub
|
||||
|
||||
If you fancy getting involved with the development of Responsive and help make it better, please refer to its [GitHub repo](https://github.com/DataTables/Responsive).
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
/*! Responsive 1.0.6
|
||||
* 2014-2015 SpryMedia Ltd - datatables.net/license
|
||||
/*! Responsive 2.0.2
|
||||
* 2014-2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* @summary Responsive
|
||||
* @description Responsive tables plug-in for DataTables
|
||||
* @version 1.0.6
|
||||
* @version 2.0.2
|
||||
* @file dataTables.responsive.js
|
||||
* @author SpryMedia Ltd (www.sprymedia.co.uk)
|
||||
* @contact www.sprymedia.co.uk/contact
|
||||
* @copyright Copyright 2014-2015 SpryMedia Ltd.
|
||||
* @copyright Copyright 2014-2016 SpryMedia Ltd.
|
||||
*
|
||||
* This source file is free software, available under the following license:
|
||||
* MIT license - http://datatables.net/license/mit
|
||||
@@ -20,12 +20,35 @@
|
||||
*
|
||||
* 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;
|
||||
}
|
||||
|
||||
(function(window, document, undefined) {
|
||||
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;
|
||||
|
||||
var factory = function( $, DataTable ) {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Responsive is a plug-in for the DataTables library that makes use of
|
||||
@@ -64,7 +87,7 @@ var factory = function( $, DataTable ) {
|
||||
* @param {object} settings DataTables settings object for the host table
|
||||
* @param {object} [opts] Configuration options
|
||||
* @requires jQuery 1.7+
|
||||
* @requires DataTables 1.10.1+
|
||||
* @requires DataTables 1.10.3+
|
||||
*
|
||||
* @example
|
||||
* $('#example').DataTable( {
|
||||
@@ -74,13 +97,14 @@ var factory = function( $, DataTable ) {
|
||||
*/
|
||||
var Responsive = function ( settings, opts ) {
|
||||
// Sanity check that we are using DataTables 1.10 or newer
|
||||
if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.1' ) ) {
|
||||
throw 'DataTables Responsive requires DataTables 1.10.1 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: []
|
||||
columns: [],
|
||||
current: []
|
||||
};
|
||||
|
||||
// Check if responsive has already been initialised on this table
|
||||
@@ -89,16 +113,23 @@ var Responsive = function ( settings, opts ) {
|
||||
}
|
||||
|
||||
// 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();
|
||||
};
|
||||
|
||||
Responsive.prototype = {
|
||||
$.extend( Responsive.prototype, {
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Constructor
|
||||
*/
|
||||
@@ -112,17 +143,51 @@ Responsive.prototype = {
|
||||
{
|
||||
var that = this;
|
||||
var dt = this.s.dt;
|
||||
var dtPrivateSettings = dt.settings()[0];
|
||||
var oldWindowWidth = $(window).width();
|
||||
|
||||
dt.settings()[0]._responsive = this;
|
||||
|
||||
// Use DataTables' private throttle function to avoid processor thrashing
|
||||
$(window).on( 'resize.dtr orientationchange.dtr', dt.settings()[0].oApi._fnThrottle( function () {
|
||||
that._resize();
|
||||
// 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 () {
|
||||
$(window).off( 'resize.dtr orientationchange.dtr draw.dtr' );
|
||||
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
|
||||
@@ -132,40 +197,55 @@ Responsive.prototype = {
|
||||
a.width > b.width ? -1 : 0;
|
||||
} );
|
||||
|
||||
// Determine which columns are already hidden, and should therefore
|
||||
// remain hidden. todo - should this be done? See thread 22677
|
||||
//
|
||||
// this.s.alwaysHidden = dt.columns(':hidden').indexes();
|
||||
|
||||
this._classLogic();
|
||||
this._resizeAuto();
|
||||
|
||||
// Details handler
|
||||
var details = this.c.details;
|
||||
if ( details.type ) {
|
||||
that._detailsInit();
|
||||
this._detailsVis();
|
||||
|
||||
dt.on( 'column-visibility.dtr', function () {
|
||||
that._detailsVis();
|
||||
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. This is used until
|
||||
// DataTables implements a native `updated` event for rows
|
||||
// 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 () {
|
||||
dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
|
||||
var row = dt.row( idx );
|
||||
|
||||
if ( row.child.isShown() ) {
|
||||
var info = that.c.details.renderer( dt, idx );
|
||||
row.child( info, 'child' ).show();
|
||||
}
|
||||
} );
|
||||
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._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();
|
||||
},
|
||||
@@ -193,6 +273,23 @@ Responsive.prototype = {
|
||||
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
|
||||
@@ -234,23 +331,25 @@ Responsive.prototype = {
|
||||
}
|
||||
}
|
||||
|
||||
// Allow columns to be shown (counting from the left) until we run out
|
||||
// of room
|
||||
// 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=display.length ; i<ien ; i++ ) {
|
||||
if ( display[i] === '-' && ! columns[i].control ) {
|
||||
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[i].minWidth < 0 ) {
|
||||
if ( empty || usedWidth - columns[colIdx].minWidth < 0 ) {
|
||||
empty = true;
|
||||
display[i] = false;
|
||||
display[colIdx] = false;
|
||||
}
|
||||
else {
|
||||
display[i] = true;
|
||||
display[colIdx] = true;
|
||||
}
|
||||
|
||||
usedWidth -= columns[i].minWidth;
|
||||
usedWidth -= columns[colIdx].minWidth;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -297,15 +396,27 @@ Responsive.prototype = {
|
||||
var that = this;
|
||||
var calc = {};
|
||||
var breakpoints = this.c.breakpoints;
|
||||
var columns = this.s.dt.columns().eq(0).map( function (i) {
|
||||
var className = this.column(i).header().className;
|
||||
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
|
||||
never: className.match(/\bnever\b/) ? true : false,
|
||||
priority: priority
|
||||
};
|
||||
} );
|
||||
|
||||
@@ -346,8 +457,7 @@ Responsive.prototype = {
|
||||
}
|
||||
}
|
||||
else if ( operator === 'not-' ) {
|
||||
// Add all but this breakpoint (xxx need extra information)
|
||||
|
||||
// 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 );
|
||||
@@ -374,7 +484,7 @@ Responsive.prototype = {
|
||||
} );
|
||||
return;
|
||||
}
|
||||
else if ( className === 'none' || className === 'never' ) {
|
||||
else if ( className === 'none' || col.never ) {
|
||||
// Include in none (default) and no auto
|
||||
hasClass = true;
|
||||
return;
|
||||
@@ -418,6 +528,33 @@ Responsive.prototype = {
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 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 ) {
|
||||
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
|
||||
*
|
||||
@@ -431,112 +568,105 @@ Responsive.prototype = {
|
||||
|
||||
// The inline type always uses the first child as the target
|
||||
if ( details.type === 'inline' ) {
|
||||
details.target = 'td:first-child';
|
||||
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';
|
||||
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', 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 ) {
|
||||
$( 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;
|
||||
}
|
||||
}
|
||||
|
||||
// $().closest() includes itself in its check
|
||||
var row = dt.row( $(this).closest('tr') );
|
||||
// Check that the row is actually a DataTable's controlled node
|
||||
if ( ! dt.row( $(this).closest('tr') ).length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( row.child.isShown() ) {
|
||||
row.child( false );
|
||||
$( row.node() ).removeClass( 'parent' );
|
||||
}
|
||||
else {
|
||||
var info = that.c.details.renderer( dt, row[0] );
|
||||
row.child( info, 'child' ).show();
|
||||
$( row.node() ).addClass( 'parent' );
|
||||
}
|
||||
} );
|
||||
// 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', '');
|
||||
}
|
||||
} );
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Update the child rows in the table whenever the column visibility changes
|
||||
*
|
||||
* Get the details to pass to a renderer for a row
|
||||
* @param {int} rowIdx Row index
|
||||
* @private
|
||||
*/
|
||||
_detailsVis: function ()
|
||||
_detailsObj: function ( rowIdx )
|
||||
{
|
||||
var that = this;
|
||||
var dt = this.s.dt;
|
||||
|
||||
// Find how many columns are hidden
|
||||
var hiddenColumns = dt.columns().indexes().filter( function ( idx ) {
|
||||
var col = dt.column( idx );
|
||||
|
||||
if ( col.visible() ) {
|
||||
return null;
|
||||
return $.map( this.s.columns, function( col, i ) {
|
||||
if ( col.never ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Only counts as hidden if it doesn't have the `never` class
|
||||
return $( col.header() ).hasClass( 'never' ) ? null : idx;
|
||||
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
|
||||
};
|
||||
} );
|
||||
var haveHidden = true;
|
||||
|
||||
if ( hiddenColumns.length === 0 || ( hiddenColumns.length === 1 && this.s.columns[ hiddenColumns[0] ].control ) ) {
|
||||
haveHidden = false;
|
||||
}
|
||||
|
||||
if ( haveHidden ) {
|
||||
// Show all existing child rows
|
||||
dt.rows( { page: 'current' } ).eq(0).each( function (idx) {
|
||||
var row = dt.row( idx );
|
||||
|
||||
if ( row.child() ) {
|
||||
var info = that.c.details.renderer( dt, row[0] );
|
||||
|
||||
// The renderer can return false to have no child row
|
||||
if ( info === false ) {
|
||||
row.child.hide();
|
||||
}
|
||||
else {
|
||||
row.child( info, 'child' ).show();
|
||||
}
|
||||
}
|
||||
} );
|
||||
}
|
||||
else {
|
||||
// Hide all existing child rows
|
||||
dt.rows( { page: 'current' } ).eq(0).each( function (idx) {
|
||||
dt.row( idx ).child.hide();
|
||||
} );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Find a breakpoint object from a name
|
||||
*
|
||||
* @param {string} name Breakpoint name to find
|
||||
* @return {object} Breakpoint description object
|
||||
* @private
|
||||
*/
|
||||
_find: function ( name )
|
||||
{
|
||||
@@ -550,6 +680,25 @@ Responsive.prototype = {
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 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
|
||||
@@ -559,12 +708,14 @@ Responsive.prototype = {
|
||||
*/
|
||||
_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-- ) {
|
||||
@@ -576,23 +727,36 @@ Responsive.prototype = {
|
||||
|
||||
// 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 ) {
|
||||
if ( columnsVis[i] === false && ! columns[i].never && ! columns[i].control ) {
|
||||
collapsedClass = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$( dt.table().node() ).toggleClass('collapsed', collapsedClass );
|
||||
$( dt.table().node() ).toggleClass( 'collapsed', collapsedClass );
|
||||
|
||||
var changed = false;
|
||||
|
||||
dt.columns().eq(0).each( function ( colIdx, i ) {
|
||||
dt.column( colIdx ).visible( columnsVis[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] );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -625,25 +789,44 @@ Responsive.prototype = {
|
||||
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().cloneNode( false ) ).appendTo( clonedTable );
|
||||
var clonedBody = $( dt.table().body() ).clone( false, false ).empty().appendTo( clonedTable ); // use jQuery because of IE8
|
||||
|
||||
$( dt.table().footer() ).clone( false ).appendTo( clonedTable );
|
||||
// Header
|
||||
var headerCells = dt.columns()
|
||||
.header()
|
||||
.filter( function (idx) {
|
||||
return dt.column(idx).visible();
|
||||
} )
|
||||
.to$()
|
||||
.clone( false )
|
||||
.css( 'display', 'table-cell' );
|
||||
|
||||
// This is a bit slow, but we need to get a clone of each row that
|
||||
// includes all columns. As such, try to do this as little as possible.
|
||||
dt.rows( { page: 'current' } ).indexes().flatten().each( function ( idx ) {
|
||||
var clone = dt.row( idx ).node().cloneNode( true );
|
||||
|
||||
if ( dt.columns( ':hidden' ).flatten().length ) {
|
||||
$(clone).append( dt.cells( idx, ':hidden' ).nodes().to$().clone() );
|
||||
}
|
||||
// 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', '' );
|
||||
|
||||
$(clone).appendTo( clonedBody );
|
||||
} );
|
||||
// Footer
|
||||
var footer = dt.table().footer();
|
||||
if ( footer ) {
|
||||
var clonedFooter = $( footer.cloneNode( false ) ).appendTo( clonedTable );
|
||||
var footerCells = dt.columns()
|
||||
.header()
|
||||
.filter( function (idx) {
|
||||
return dt.column(idx).visible();
|
||||
} )
|
||||
.to$()
|
||||
.clone( false )
|
||||
.css( 'display', 'table-cell' );
|
||||
|
||||
$('<tr/>')
|
||||
.append( footerCells )
|
||||
.appendTo( clonedFooter );
|
||||
}
|
||||
|
||||
var cells = dt.columns().header().to$().clone( false );
|
||||
$('<tr/>')
|
||||
.append( cells )
|
||||
.append( headerCells )
|
||||
.appendTo( clonedHeader );
|
||||
|
||||
// In the inline case extra padding is applied to the first column to
|
||||
@@ -661,19 +844,67 @@ Responsive.prototype = {
|
||||
} )
|
||||
.append( clonedTable );
|
||||
|
||||
// Remove columns which are not to be included
|
||||
inserted.find('th.never, td.never').remove();
|
||||
|
||||
inserted.insertBefore( dt.table().node() );
|
||||
|
||||
// The cloned header now contains the smallest that each column can be
|
||||
dt.columns().eq(0).each( function ( idx ) {
|
||||
columns[idx].minWidth = cells[ idx ].offsetWidth || 0;
|
||||
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 );
|
||||
}
|
||||
};
|
||||
} );
|
||||
|
||||
|
||||
/**
|
||||
@@ -695,6 +926,110 @@ Responsive.breakpoints = [
|
||||
];
|
||||
|
||||
|
||||
/**
|
||||
* 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>'
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Responsive default settings for initialisation
|
||||
*
|
||||
@@ -730,6 +1065,7 @@ Responsive.defaults = {
|
||||
*
|
||||
* 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
|
||||
@@ -740,36 +1076,21 @@ Responsive.defaults = {
|
||||
* @type {Object|string}
|
||||
*/
|
||||
details: {
|
||||
renderer: function ( api, rowIdx ) {
|
||||
var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
|
||||
var header = $( api.column( cell.column ).header() );
|
||||
var idx = api.cell( cell ).index();
|
||||
display: Responsive.display.childRow,
|
||||
|
||||
if ( header.hasClass( 'control' ) || header.hasClass( 'never' ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Use a non-public DT API method to render the data for display
|
||||
// This needs to be updated when DT adds a suitable method for
|
||||
// this type of data retrieval
|
||||
var dtPrivate = api.settings()[0];
|
||||
var cellData = dtPrivate.oApi._fnGetCellData(
|
||||
dtPrivate, idx.row, idx.column, 'display'
|
||||
);
|
||||
var title = header.text();
|
||||
if ( title ) {
|
||||
title = title + ':';
|
||||
}
|
||||
|
||||
return '<li data-dtr-index="'+idx.column+'">'+
|
||||
renderer: function ( api, rowIdx, columns ) {
|
||||
var data = $.map( columns, function ( col, i ) {
|
||||
return col.hidden ?
|
||||
'<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
|
||||
'<span class="dtr-title">'+
|
||||
title+
|
||||
col.title+
|
||||
'</span> '+
|
||||
'<span class="dtr-data">'+
|
||||
cellData+
|
||||
col.data+
|
||||
'</span>'+
|
||||
'</li>';
|
||||
} ).toArray().join('');
|
||||
'</li>' :
|
||||
'';
|
||||
} ).join('');
|
||||
|
||||
return data ?
|
||||
$('<ul data-dtr-index="'+rowIdx+'"/>').append( data ) :
|
||||
@@ -779,7 +1100,15 @@ Responsive.defaults = {
|
||||
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'
|
||||
};
|
||||
|
||||
|
||||
@@ -819,6 +1148,14 @@ Api.register( 'responsive.recalc()', function () {
|
||||
} );
|
||||
} );
|
||||
|
||||
Api.register( 'responsive.hasHidden()', function () {
|
||||
var ctx = this.context[0];
|
||||
|
||||
return ctx._responsive ?
|
||||
$.inArray( false, ctx._responsive.s.current ) !== -1 :
|
||||
false;
|
||||
} );
|
||||
|
||||
|
||||
/**
|
||||
* Version information
|
||||
@@ -826,7 +1163,7 @@ Api.register( 'responsive.recalc()', function () {
|
||||
* @name Responsive.version
|
||||
* @static
|
||||
*/
|
||||
Responsive.version = '1.0.6';
|
||||
Responsive.version = '2.0.2';
|
||||
|
||||
|
||||
$.fn.dataTable.Responsive = Responsive;
|
||||
@@ -834,7 +1171,7 @@ $.fn.DataTable.Responsive = Responsive;
|
||||
|
||||
// Attach a listener to the document which listens for DataTables initialisation
|
||||
// events so we can automatically initialise
|
||||
$(document).on( 'init.dt.dtr', function (e, settings, json) {
|
||||
$(document).on( 'preInit.dt.dtr', function (e, settings, json) {
|
||||
if ( e.namespace !== 'dt' ) {
|
||||
return;
|
||||
}
|
||||
@@ -852,22 +1189,6 @@ $(document).on( 'init.dt.dtr', function (e, settings, json) {
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
return Responsive;
|
||||
}; // /factory
|
||||
|
||||
|
||||
// Define as an AMD module if possible
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
define( ['jquery', 'datatables'], factory );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// Node/CommonJS
|
||||
factory( require('jquery'), require('datatables') );
|
||||
}
|
||||
else if ( jQuery && !jQuery.fn.dataTable.Responsive ) {
|
||||
// Otherwise simply initialise as normal, stopping multiple evaluation
|
||||
factory( jQuery, jQuery.fn.dataTable );
|
||||
}
|
||||
|
||||
|
||||
})(window, document);
|
||||
}));
|
||||
|
||||
@@ -1,19 +1,25 @@
|
||||
/*!
|
||||
Responsive 1.0.6
|
||||
2014-2015 SpryMedia Ltd - datatables.net/license
|
||||
Responsive 2.0.2
|
||||
2014-2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(n,p){var o=function(e,k){var h=function(d,a){if(!k.versionCheck||!k.versionCheck("1.10.1"))throw"DataTables Responsive requires DataTables 1.10.1 or newer";this.s={dt:new k.Api(d),columns:[]};this.s.dt.settings()[0].responsive||(a&&"string"===typeof a.details&&(a.details={type:a.details}),this.c=e.extend(!0,{},h.defaults,k.defaults.responsive,a),d.responsive=this,this._constructor())};h.prototype={_constructor:function(){var d=this,a=this.s.dt;a.settings()[0]._responsive=this;e(n).on("resize.dtr orientationchange.dtr",
|
||||
a.settings()[0].oApi._fnThrottle(function(){d._resize()}));a.on("destroy.dtr",function(){e(n).off("resize.dtr orientationchange.dtr draw.dtr")});this.c.breakpoints.sort(function(a,c){return a.width<c.width?1:a.width>c.width?-1:0});this._classLogic();this._resizeAuto();var c=this.c.details;c.type&&(d._detailsInit(),this._detailsVis(),a.on("column-visibility.dtr",function(){d._detailsVis()}),a.on("draw.dtr",function(){a.rows({page:"current"}).iterator("row",function(b,c){var f=a.row(c);if(f.child.isShown()){var i=
|
||||
d.c.details.renderer(a,c);f.child(i,"child").show()}})}),e(a.table().node()).addClass("dtr-"+c.type));this._resize()},_columnsVisiblity:function(d){var a=this.s.dt,c=this.s.columns,b,g,f=e.map(c,function(a){return a.auto&&null===a.minWidth?!1:!0===a.auto?"-":-1!==e.inArray(d,a.includeIn)}),i=0;b=0;for(g=f.length;b<g;b++)!0===f[b]&&(i+=c[b].minWidth);b=a.settings()[0].oScroll;b=b.sY||b.sX?b.iBarWidth:0;a=a.table().container().offsetWidth-b-i;b=0;for(g=f.length;b<g;b++)c[b].control&&(a-=c[b].minWidth);
|
||||
i=!1;b=0;for(g=f.length;b<g;b++)"-"===f[b]&&!c[b].control&&(i||0>a-c[b].minWidth?(i=!0,f[b]=!1):f[b]=!0,a-=c[b].minWidth);a=!1;b=0;for(g=c.length;b<g;b++)if(!c[b].control&&!c[b].never&&!f[b]){a=!0;break}b=0;for(g=c.length;b<g;b++)c[b].control&&(f[b]=a);-1===e.inArray(!0,f)&&(f[0]=!0);return f},_classLogic:function(){var d=this,a=this.c.breakpoints,c=this.s.dt.columns().eq(0).map(function(a){a=this.column(a).header().className;return{className:a,includeIn:[],auto:!1,control:!1,never:a.match(/\bnever\b/)?
|
||||
!0:!1}}),b=function(a,b){var d=c[a].includeIn;-1===e.inArray(b,d)&&d.push(b)},g=function(f,g,e,j){if(e)if("max-"===e){j=d._find(g).width;g=0;for(e=a.length;g<e;g++)a[g].width<=j&&b(f,a[g].name)}else if("min-"===e){j=d._find(g).width;g=0;for(e=a.length;g<e;g++)a[g].width>=j&&b(f,a[g].name)}else{if("not-"===e){g=0;for(e=a.length;g<e;g++)-1===a[g].name.indexOf(j)&&b(f,a[g].name)}}else c[f].includeIn.push(g)};c.each(function(b,c){for(var d=b.className.split(" "),j=!1,h=0,k=d.length;h<k;h++){var l=e.trim(d[h]);
|
||||
if("all"===l){j=!0;b.includeIn=e.map(a,function(a){return a.name});return}if("none"===l||"never"===l){j=!0;return}if("control"===l){j=!0;b.control=!0;return}e.each(a,function(a,b){var d=b.name.split("-"),e=l.match(RegExp("(min\\-|max\\-|not\\-)?("+d[0]+")(\\-[_a-zA-Z0-9])?"));e&&(j=!0,e[2]===d[0]&&e[3]==="-"+d[1]?g(c,b.name,e[1],e[2]+e[3]):e[2]===d[0]&&!e[3]&&g(c,b.name,e[1],e[2]))})}j||(b.auto=!0)});this.s.columns=c},_detailsInit:function(){var d=this,a=this.s.dt,c=this.c.details;"inline"===c.type&&
|
||||
(c.target="td:first-child");var b=c.target;e(a.table().body()).on("click","string"===typeof b?b:"td",function(){if(e(a.table().node()).hasClass("collapsed")&&a.row(e(this).closest("tr")).length){if(typeof b==="number"){var c=b<0?a.columns().eq(0).length+b:b;if(a.cell(this).index().column!==c)return}c=a.row(e(this).closest("tr"));if(c.child.isShown()){c.child(false);e(c.node()).removeClass("parent")}else{var f=d.c.details.renderer(a,c[0]);c.child(f,"child").show();e(c.node()).addClass("parent")}}})},
|
||||
_detailsVis:function(){var d=this,a=this.s.dt,c=a.columns().indexes().filter(function(b){var c=a.column(b);return c.visible()?null:e(c.header()).hasClass("never")?null:b}),b=!0;if(0===c.length||1===c.length&&this.s.columns[c[0]].control)b=!1;b?a.rows({page:"current"}).eq(0).each(function(b){b=a.row(b);if(b.child()){var c=d.c.details.renderer(a,b[0]);!1===c?b.child.hide():b.child(c,"child").show()}}):a.rows({page:"current"}).eq(0).each(function(b){a.row(b).child.hide()})},_find:function(d){for(var a=
|
||||
this.c.breakpoints,c=0,b=a.length;c<b;c++)if(a[c].name===d)return a[c]},_resize:function(){var d=this.s.dt,a=e(n).width(),c=this.c.breakpoints,b=c[0].name,g=this.s.columns,f;for(f=c.length-1;0<=f;f--)if(a<=c[f].width){b=c[f].name;break}var i=this._columnsVisiblity(b),c=!1;f=0;for(a=g.length;f<a;f++)if(!1===i[f]&&!g[f].never){c=!0;break}e(d.table().node()).toggleClass("collapsed",c);d.columns().eq(0).each(function(a,b){d.column(a).visible(i[b])})},_resizeAuto:function(){var d=this.s.dt,a=this.s.columns;
|
||||
if(this.c.auto&&-1!==e.inArray(!0,e.map(a,function(a){return a.auto}))){d.table().node();var c=d.table().node().cloneNode(!1),b=e(d.table().header().cloneNode(!1)).appendTo(c),g=e(d.table().body().cloneNode(!1)).appendTo(c);e(d.table().footer()).clone(!1).appendTo(c);d.rows({page:"current"}).indexes().flatten().each(function(a){var b=d.row(a).node().cloneNode(!0);d.columns(":hidden").flatten().length&&e(b).append(d.cells(a,":hidden").nodes().to$().clone());e(b).appendTo(g)});var f=d.columns().header().to$().clone(!1);
|
||||
e("<tr/>").append(f).appendTo(b);"inline"===this.c.details.type&&e(c).addClass("dtr-inline collapsed");c=e("<div/>").css({width:1,height:1,overflow:"hidden"}).append(c);c.find("th.never, td.never").remove();c.insertBefore(d.table().node());d.columns().eq(0).each(function(b){a[b].minWidth=f[b].offsetWidth||0});c.remove()}}};h.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}];h.defaults={breakpoints:h.breakpoints,
|
||||
auto:!0,details:{renderer:function(d,a){var c=d.cells(a,":hidden").eq(0).map(function(a){var c=e(d.column(a.column).header()),a=d.cell(a).index();if(c.hasClass("control")||c.hasClass("never"))return"";var f=d.settings()[0],f=f.oApi._fnGetCellData(f,a.row,a.column,"display");(c=c.text())&&(c+=":");return'<li data-dtr-index="'+a.column+'"><span class="dtr-title">'+c+'</span> <span class="dtr-data">'+f+"</span></li>"}).toArray().join("");return c?e('<ul data-dtr-index="'+a+'"/>').append(c):!1},target:0,
|
||||
type:"inline"}};var m=e.fn.dataTable.Api;m.register("responsive()",function(){return this});m.register("responsive.index()",function(d){d=e(d);return{column:d.data("dtr-index"),row:d.parent().data("dtr-index")}});m.register("responsive.rebuild()",function(){return this.iterator("table",function(d){d._responsive&&d._responsive._classLogic()})});m.register("responsive.recalc()",function(){return this.iterator("table",function(d){d._responsive&&(d._responsive._resizeAuto(),d._responsive._resize())})});
|
||||
h.version="1.0.6";e.fn.dataTable.Responsive=h;e.fn.DataTable.Responsive=h;e(p).on("init.dt.dtr",function(d,a){if("dt"===d.namespace&&(e(a.nTable).hasClass("responsive")||e(a.nTable).hasClass("dt-responsive")||a.oInit.responsive||k.defaults.responsive)){var c=a.oInit.responsive;!1!==c&&new h(a,e.isPlainObject(c)?c:{})}});return h};"function"===typeof define&&define.amd?define(["jquery","datatables"],o):"object"===typeof exports?o(require("jquery"),require("datatables")):jQuery&&!jQuery.fn.dataTable.Responsive&&
|
||||
o(jQuery,jQuery.fn.dataTable)})(window,document);
|
||||
(function(c){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(j){return c(j,window,document)}):"object"===typeof exports?module.exports=function(j,k){j||(j=window);if(!k||!k.fn.dataTable)k=require("datatables.net")(j,k).$;return c(k,j,j.document)}:c(jQuery,window,document)})(function(c,j,k,p){var n=c.fn.dataTable,l=function(a,b){if(!n.versionCheck||!n.versionCheck("1.10.3"))throw"DataTables Responsive requires DataTables 1.10.3 or newer";this.s={dt:new n.Api(a),columns:[],
|
||||
current:[]};this.s.dt.settings()[0].responsive||(b&&"string"===typeof b.details?b.details={type:b.details}:b&&!1===b.details?b.details={type:!1}:b&&!0===b.details&&(b.details={type:"inline"}),this.c=c.extend(!0,{},l.defaults,n.defaults.responsive,b),a.responsive=this,this._constructor())};c.extend(l.prototype,{_constructor:function(){var a=this,b=this.s.dt,d=b.settings()[0],e=c(j).width();b.settings()[0]._responsive=this;c(j).on("resize.dtr orientationchange.dtr",n.util.throttle(function(){var b=
|
||||
c(j).width();b!==e&&(a._resize(),e=b)}));d.oApi._fnCallbackReg(d,"aoRowCreatedCallback",function(e){-1!==c.inArray(!1,a.s.current)&&c("td, th",e).each(function(e){e=b.column.index("toData",e);!1===a.s.current[e]&&c(this).css("display","none")})});b.on("destroy.dtr",function(){b.off(".dtr");c(b.table().body()).off(".dtr");c(j).off("resize.dtr orientationchange.dtr");c.each(a.s.current,function(b,e){!1===e&&a._setColumnVis(b,!0)})});this.c.breakpoints.sort(function(a,b){return a.width<b.width?1:a.width>
|
||||
b.width?-1:0});this._classLogic();this._resizeAuto();d=this.c.details;!1!==d.type&&(a._detailsInit(),b.on("column-visibility.dtr",function(){a._classLogic();a._resizeAuto();a._resize()}),b.on("draw.dtr",function(){a._redrawChildren()}),c(b.table().node()).addClass("dtr-"+d.type));b.on("column-reorder.dtr",function(){a._classLogic();a._resizeAuto();a._resize()});b.on("column-sizing.dtr",function(){a._resize()});b.on("init.dtr",function(){a._resizeAuto();a._resize();c.inArray(false,a.s.current)&&b.columns.adjust()});
|
||||
this._resize()},_columnsVisiblity:function(a){var b=this.s.dt,d=this.s.columns,e,f,g=d.map(function(a,b){return{columnIdx:b,priority:a.priority}}).sort(function(a,b){return a.priority!==b.priority?a.priority-b.priority:a.columnIdx-b.columnIdx}),h=c.map(d,function(b){return b.auto&&null===b.minWidth?!1:!0===b.auto?"-":-1!==c.inArray(a,b.includeIn)}),m=0;e=0;for(f=h.length;e<f;e++)!0===h[e]&&(m+=d[e].minWidth);e=b.settings()[0].oScroll;e=e.sY||e.sX?e.iBarWidth:0;b=b.table().container().offsetWidth-
|
||||
e-m;e=0;for(f=h.length;e<f;e++)d[e].control&&(b-=d[e].minWidth);m=!1;e=0;for(f=g.length;e<f;e++){var i=g[e].columnIdx;"-"===h[i]&&(!d[i].control&&d[i].minWidth)&&(m||0>b-d[i].minWidth?(m=!0,h[i]=!1):h[i]=!0,b-=d[i].minWidth)}g=!1;e=0;for(f=d.length;e<f;e++)if(!d[e].control&&!d[e].never&&!h[e]){g=!0;break}e=0;for(f=d.length;e<f;e++)d[e].control&&(h[e]=g);-1===c.inArray(!0,h)&&(h[0]=!0);return h},_classLogic:function(){var a=this,b=this.c.breakpoints,d=this.s.dt,e=d.columns().eq(0).map(function(b){var a=
|
||||
this.column(b),e=a.header().className,b=d.settings()[0].aoColumns[b].responsivePriority;b===p&&(a=c(a.header()).data("priority"),b=a!==p?1*a:1E4);return{className:e,includeIn:[],auto:!1,control:!1,never:e.match(/\bnever\b/)?!0:!1,priority:b}}),f=function(b,a){var d=e[b].includeIn;-1===c.inArray(a,d)&&d.push(a)},g=function(c,d,i,g){if(i)if("max-"===i){g=a._find(d).width;d=0;for(i=b.length;d<i;d++)b[d].width<=g&&f(c,b[d].name)}else if("min-"===i){g=a._find(d).width;d=0;for(i=b.length;d<i;d++)b[d].width>=
|
||||
g&&f(c,b[d].name)}else{if("not-"===i){d=0;for(i=b.length;d<i;d++)-1===b[d].name.indexOf(g)&&f(c,b[d].name)}}else e[c].includeIn.push(d)};e.each(function(a,e){for(var d=a.className.split(" "),f=!1,j=0,l=d.length;j<l;j++){var k=c.trim(d[j]);if("all"===k){f=!0;a.includeIn=c.map(b,function(a){return a.name});return}if("none"===k||a.never){f=!0;return}if("control"===k){f=!0;a.control=!0;return}c.each(b,function(a,b){var d=b.name.split("-"),c=k.match(RegExp("(min\\-|max\\-|not\\-)?("+d[0]+")(\\-[_a-zA-Z0-9])?"));
|
||||
c&&(f=!0,c[2]===d[0]&&c[3]==="-"+d[1]?g(e,b.name,c[1],c[2]+c[3]):c[2]===d[0]&&!c[3]&&g(e,b.name,c[1],c[2]))})}f||(a.auto=!0)});this.s.columns=e},_detailsDisplay:function(a,b){var d=this,e=this.s.dt,f=this.c.details;if(f&&f.type){var g=f.display(a,b,function(){return f.renderer(e,a[0],d._detailsObj(a[0]))});(!0===g||!1===g)&&c(e.table().node()).triggerHandler("responsive-display.dt",[e,a,g,b])}},_detailsInit:function(){var a=this,b=this.s.dt,d=this.c.details;"inline"===d.type&&(d.target="td:first-child, th:first-child");
|
||||
b.on("draw.dtr",function(){a._tabIndexes()});a._tabIndexes();c(b.table().body()).on("keyup.dtr","td, th",function(a){a.keyCode===13&&c(this).data("dtr-keyboard")&&c(this).click()});var e=d.target;c(b.table().body()).on("click.dtr mousedown.dtr mouseup.dtr","string"===typeof e?e:"td, th",function(d){if(c(b.table().node()).hasClass("collapsed")&&b.row(c(this).closest("tr")).length){if(typeof e==="number"){var g=e<0?b.columns().eq(0).length+e:e;if(b.cell(this).index().column!==g)return}g=b.row(c(this).closest("tr"));
|
||||
d.type==="click"?a._detailsDisplay(g,false):d.type==="mousedown"?c(this).css("outline","none"):d.type==="mouseup"&&c(this).blur().css("outline","")}})},_detailsObj:function(a){var b=this,d=this.s.dt;return c.map(this.s.columns,function(e,c){if(!e.never)return{title:d.settings()[0].aoColumns[c].sTitle,data:d.cell(a,c).render(b.c.orthogonal),hidden:d.column(c).visible()&&!b.s.current[c],columnIndex:c,rowIndex:a}})},_find:function(a){for(var b=this.c.breakpoints,d=0,c=b.length;d<c;d++)if(b[d].name===
|
||||
a)return b[d]},_redrawChildren:function(){var a=this,b=this.s.dt;b.rows({page:"current"}).iterator("row",function(d,c){b.row(c);a._detailsDisplay(b.row(c),!0)})},_resize:function(){var a=this,b=this.s.dt,d=c(j).width(),e=this.c.breakpoints,f=e[0].name,g=this.s.columns,h,m=this.s.current.slice();for(h=e.length-1;0<=h;h--)if(d<=e[h].width){f=e[h].name;break}var i=this._columnsVisiblity(f);this.s.current=i;e=!1;h=0;for(d=g.length;h<d;h++)if(!1===i[h]&&!g[h].never&&!g[h].control){e=!0;break}c(b.table().node()).toggleClass("collapsed",
|
||||
e);var k=!1;b.columns().eq(0).each(function(b,c){i[c]!==m[c]&&(k=!0,a._setColumnVis(b,i[c]))});k&&(this._redrawChildren(),c(b.table().node()).trigger("responsive-resize.dt",[b,this.s.current]))},_resizeAuto:function(){var a=this.s.dt,b=this.s.columns;if(this.c.auto&&-1!==c.inArray(!0,c.map(b,function(a){return a.auto}))){a.table().node();var d=a.table().node().cloneNode(!1),e=c(a.table().header().cloneNode(!1)).appendTo(d),f=c(a.table().body()).clone(!1,!1).empty().appendTo(d),g=a.columns().header().filter(function(b){return a.column(b).visible()}).to$().clone(!1).css("display",
|
||||
"table-cell");c(f).append(c(a.rows({page:"current"}).nodes()).clone(!1)).find("th, td").css("display","");if(f=a.table().footer()){var f=c(f.cloneNode(!1)).appendTo(d),h=a.columns().header().filter(function(b){return a.column(b).visible()}).to$().clone(!1).css("display","table-cell");c("<tr/>").append(h).appendTo(f)}c("<tr/>").append(g).appendTo(e);"inline"===this.c.details.type&&c(d).addClass("dtr-inline collapsed");d=c("<div/>").css({width:1,height:1,overflow:"hidden"}).append(d);d.insertBefore(a.table().node());
|
||||
g.each(function(c){c=a.column.index("fromVisible",c);b[c].minWidth=this.offsetWidth||0});d.remove()}},_setColumnVis:function(a,b){var d=this.s.dt,e=b?"":"none";c(d.column(a).header()).css("display",e);c(d.column(a).footer()).css("display",e);d.column(a).nodes().to$().css("display",e)},_tabIndexes:function(){var a=this.s.dt,b=a.cells({page:"current"}).nodes().to$(),d=a.settings()[0],e=this.c.details.target;b.filter("[data-dtr-keyboard]").removeData("[data-dtr-keyboard]");c("number"===typeof e?":eq("+
|
||||
e+")":e,a.rows({page:"current"}).nodes()).attr("tabIndex",d.iTabIndex).data("dtr-keyboard",1)}});l.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}];l.display={childRow:function(a,b,d){if(b){if(c(a.node()).hasClass("parent"))return a.child(d(),"child").show(),!0}else{if(a.child.isShown())return a.child(!1),c(a.node()).removeClass("parent"),!1;a.child(d(),"child").show();c(a.node()).addClass("parent");
|
||||
return!0}},childRowImmediate:function(a,b,d){if(!b&&a.child.isShown()||!a.responsive.hasHidden())return a.child(!1),c(a.node()).removeClass("parent"),!1;a.child(d(),"child").show();c(a.node()).addClass("parent");return!0},modal:function(a){return function(b,d,e){if(d)c("div.dtr-modal-content").empty().append(e());else{var f=function(){g.remove();c(k).off("keypress.dtr")},g=c('<div class="dtr-modal"/>').append(c('<div class="dtr-modal-display"/>').append(c('<div class="dtr-modal-content"/>').append(e())).append(c('<div class="dtr-modal-close">×</div>').click(function(){f()}))).append(c('<div class="dtr-modal-background"/>').click(function(){f()})).appendTo("body");
|
||||
c(k).on("keyup.dtr",function(a){27===a.keyCode&&(a.stopPropagation(),f())})}a&&a.header&&c("div.dtr-modal-content").prepend("<h2>"+a.header(b)+"</h2>")}}};l.defaults={breakpoints:l.breakpoints,auto:!0,details:{display:l.display.childRow,renderer:function(a,b,d){return(a=c.map(d,function(a){return a.hidden?'<li data-dtr-index="'+a.columnIndex+'" data-dt-row="'+a.rowIndex+'" data-dt-column="'+a.columnIndex+'"><span class="dtr-title">'+a.title+'</span> <span class="dtr-data">'+a.data+"</span></li>":
|
||||
""}).join(""))?c('<ul data-dtr-index="'+b+'"/>').append(a):!1},target:0,type:"inline"},orthogonal:"display"};var o=c.fn.dataTable.Api;o.register("responsive()",function(){return this});o.register("responsive.index()",function(a){a=c(a);return{column:a.data("dtr-index"),row:a.parent().data("dtr-index")}});o.register("responsive.rebuild()",function(){return this.iterator("table",function(a){a._responsive&&a._responsive._classLogic()})});o.register("responsive.recalc()",function(){return this.iterator("table",
|
||||
function(a){a._responsive&&(a._responsive._resizeAuto(),a._responsive._resize())})});o.register("responsive.hasHidden()",function(){var a=this.context[0];return a._responsive?-1!==c.inArray(!1,a._responsive.s.current):!1});l.version="2.0.2";c.fn.dataTable.Responsive=l;c.fn.DataTable.Responsive=l;c(k).on("preInit.dt.dtr",function(a,b){if("dt"===a.namespace&&(c(b.nTable).hasClass("responsive")||c(b.nTable).hasClass("dt-responsive")||b.oInit.responsive||n.defaults.responsive)){var d=b.oInit.responsive;
|
||||
!1!==d&&new l(b,c.isPlainObject(d)?d:{})}});return l});
|
||||
|
||||
Reference in New Issue
Block a user