|
@@ -1,15 +1,15 @@
|
|
|
-
|
|
|
- * 2014-2018 SpryMedia Ltd - datatables.net/license
|
|
|
+
|
|
|
+ * 2014-2020 SpryMedia Ltd - datatables.net/license
|
|
|
*/
|
|
|
|
|
|
|
|
|
* @summary Responsive
|
|
|
* @description Responsive tables plug-in for DataTables
|
|
|
- * @version 2.2.3
|
|
|
+ * @version 2.2.5
|
|
|
* @file dataTables.responsive.js
|
|
|
* @author SpryMedia Ltd (www.sprymedia.co.uk)
|
|
|
* @contact www.sprymedia.co.uk/contact
|
|
|
- * @copyright Copyright 2014-2018 SpryMedia Ltd.
|
|
|
+ * @copyright Copyright 2014-2020 SpryMedia Ltd.
|
|
|
*
|
|
|
* This source file is free software, available under the following license:
|
|
|
* MIT license - http:
|
|
@@ -144,7 +144,7 @@ $.extend( Responsive.prototype, {
|
|
|
var that = this;
|
|
|
var dt = this.s.dt;
|
|
|
var dtPrivateSettings = dt.settings()[0];
|
|
|
- var oldWindowWidth = $(window).width();
|
|
|
+ var oldWindowWidth = $(window).innerWidth();
|
|
|
|
|
|
dt.settings()[0]._responsive = this;
|
|
|
|
|
@@ -153,7 +153,7 @@ $.extend( Responsive.prototype, {
|
|
|
$(window).on( 'resize.dtr orientationchange.dtr', DataTable.util.throttle( function () {
|
|
|
|
|
|
|
|
|
- var width = $(window).width();
|
|
|
+ var width = $(window).innerWidth();
|
|
|
|
|
|
if ( width !== oldWindowWidth ) {
|
|
|
that._resize();
|
|
@@ -181,6 +181,7 @@ $.extend( Responsive.prototype, {
|
|
|
dt.off( '.dtr' );
|
|
|
$( dt.table().body() ).off( '.dtr' );
|
|
|
$(window).off( 'resize.dtr orientationchange.dtr' );
|
|
|
+ dt.cells('.dtr-control').nodes().to$().removeClass('dtr-control');
|
|
|
|
|
|
|
|
|
$.each( that.s.current, function ( i, val ) {
|
|
@@ -238,7 +239,7 @@ $.extend( Responsive.prototype, {
|
|
|
dt.on( 'column-reorder.dtr', function (e, settings, details) {
|
|
|
that._classLogic();
|
|
|
that._resizeAuto();
|
|
|
- that._resize();
|
|
|
+ that._resize(true);
|
|
|
} );
|
|
|
|
|
|
|
|
@@ -267,16 +268,24 @@ $.extend( Responsive.prototype, {
|
|
|
} );
|
|
|
});
|
|
|
|
|
|
- dt.on( 'init.dtr', function (e, settings, details) {
|
|
|
- that._resizeAuto();
|
|
|
- that._resize();
|
|
|
+ dt
|
|
|
+ .on( 'draw.dtr', function () {
|
|
|
+ that._controlClass();
|
|
|
+ })
|
|
|
+ .on( 'init.dtr', function (e, settings, details) {
|
|
|
+ if ( e.namespace !== 'dt' ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
-
|
|
|
- if ( $.inArray( false, that.s.current ) ) {
|
|
|
- dt.columns.adjust();
|
|
|
- }
|
|
|
- } );
|
|
|
+ that._resizeAuto();
|
|
|
+ that._resize();
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ if ( $.inArray( false, that.s.current ) ) {
|
|
|
+ dt.columns.adjust();
|
|
|
+ }
|
|
|
+ } );
|
|
|
|
|
|
|
|
|
this._resize();
|
|
@@ -441,13 +450,12 @@ $.extend( Responsive.prototype, {
|
|
|
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 ) {
|
|
|
- var dataPriority = $(column.header()).data('priority');
|
|
|
-
|
|
|
- priority = dataPriority !== undefined ?
|
|
|
- dataPriority * 1 :
|
|
|
- 10000;
|
|
|
+ priority = dataPriority === undefined || dataPriority === null?
|
|
|
+ 10000 :
|
|
|
+ dataPriority * 1;
|
|
|
}
|
|
|
|
|
|
return {
|
|
@@ -567,6 +575,36 @@ $.extend( Responsive.prototype, {
|
|
|
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);
|
|
|
+
|
|
|
+
|
|
|
+ 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
|
|
@@ -608,7 +646,7 @@ $.extend( Responsive.prototype, {
|
|
|
|
|
|
|
|
|
if ( details.type === 'inline' ) {
|
|
|
- details.target = 'td:first-child, th:first-child';
|
|
|
+ details.target = 'td.dtr-control, th.dtr-control';
|
|
|
}
|
|
|
|
|
|
|
|
@@ -627,51 +665,53 @@ $.extend( Responsive.prototype, {
|
|
|
var target = details.target;
|
|
|
var selector = typeof target === 'string' ? target : 'td, th';
|
|
|
|
|
|
-
|
|
|
- $( dt.table().body() )
|
|
|
- .on( 'click.dtr mousedown.dtr mouseup.dtr', selector, function (e) {
|
|
|
-
|
|
|
-
|
|
|
- if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
|
|
|
- return;
|
|
|
- }
|
|
|
+ if ( target !== undefined || target !== null ) {
|
|
|
+
|
|
|
+ $( dt.table().body() )
|
|
|
+ .on( 'click.dtr mousedown.dtr mouseup.dtr', selector, function (e) {
|
|
|
+
|
|
|
+
|
|
|
+ if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
- if ( $.inArray( $(this).closest('tr').get(0), dt.rows().nodes().toArray() ) === -1 ) {
|
|
|
- return;
|
|
|
- }
|
|
|
+
|
|
|
+ if ( $.inArray( $(this).closest('tr').get(0), dt.rows().nodes().toArray() ) === -1 ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
-
|
|
|
- if ( typeof target === 'number' ) {
|
|
|
- var targetIdx = target < 0 ?
|
|
|
- dt.columns().eq(0).length + target :
|
|
|
- target;
|
|
|
+
|
|
|
+
|
|
|
+ if ( typeof target === 'number' ) {
|
|
|
+ var targetIdx = target < 0 ?
|
|
|
+ dt.columns().eq(0).length + target :
|
|
|
+ target;
|
|
|
|
|
|
- if ( dt.cell( this ).index().column !== targetIdx ) {
|
|
|
- return;
|
|
|
+ if ( dt.cell( this ).index().column !== targetIdx ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
-
|
|
|
- var row = dt.row( $(this).closest('tr') );
|
|
|
+
|
|
|
+ var row = dt.row( $(this).closest('tr') );
|
|
|
|
|
|
-
|
|
|
- if ( e.type === 'click' ) {
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- that._detailsDisplay( row, false );
|
|
|
- }
|
|
|
- else if ( e.type === 'mousedown' ) {
|
|
|
-
|
|
|
- $(this).css('outline', 'none');
|
|
|
- }
|
|
|
- else if ( e.type === 'mouseup' ) {
|
|
|
-
|
|
|
- $(this).blur().css('outline', '');
|
|
|
- }
|
|
|
- } );
|
|
|
+
|
|
|
+ if ( e.type === 'click' ) {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ that._detailsDisplay( row, false );
|
|
|
+ }
|
|
|
+ else if ( e.type === 'mousedown' ) {
|
|
|
+
|
|
|
+ $(this).css('outline', 'none');
|
|
|
+ }
|
|
|
+ else if ( e.type === 'mouseup' ) {
|
|
|
+
|
|
|
+ $(this).trigger('blur').css('outline', '');
|
|
|
+ }
|
|
|
+ } );
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
|
|
@@ -691,12 +731,17 @@ $.extend( Responsive.prototype, {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
+ var dtCol = dt.settings()[0].aoColumns[ i ];
|
|
|
+
|
|
|
return {
|
|
|
- title: dt.settings()[0].aoColumns[ i ].sTitle,
|
|
|
+ className: dtCol.sClass,
|
|
|
+ columnIndex: i,
|
|
|
data: dt.cell( rowIdx, i ).render( that.c.orthogonal ),
|
|
|
hidden: dt.column( i ).visible() && !that.s.current[ i ],
|
|
|
- columnIndex: i,
|
|
|
- rowIndex: rowIdx
|
|
|
+ rowIndex: rowIdx,
|
|
|
+ title: dtCol.sTitle !== null ?
|
|
|
+ dtCol.sTitle :
|
|
|
+ $(dt.column(i).header()).text()
|
|
|
};
|
|
|
} );
|
|
|
},
|
|
@@ -745,13 +790,14 @@ $.extend( Responsive.prototype, {
|
|
|
* 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 ()
|
|
|
+ _resize: function (forceRedraw)
|
|
|
{
|
|
|
var that = this;
|
|
|
var dt = this.s.dt;
|
|
|
- var width = $(window).width();
|
|
|
+ var width = $(window).innerWidth();
|
|
|
var breakpoints = this.c.breakpoints;
|
|
|
var breakpoint = breakpoints[0].name;
|
|
|
var columns = this.s.columns;
|
|
@@ -774,6 +820,7 @@ $.extend( Responsive.prototype, {
|
|
|
|
|
|
|
|
|
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;
|
|
@@ -791,7 +838,7 @@ $.extend( Responsive.prototype, {
|
|
|
visible++;
|
|
|
}
|
|
|
|
|
|
- if ( columnsVis[i] !== oldVis[i] ) {
|
|
|
+ if ( forceRedraw || columnsVis[i] !== oldVis[i] ) {
|
|
|
changed = true;
|
|
|
that._setColumnVis( colIdx, columnsVis[i] );
|
|
|
}
|
|
@@ -851,6 +898,8 @@ $.extend( Responsive.prototype, {
|
|
|
var clonedHeader = $( dt.table().header().cloneNode( false ) ).appendTo( clonedTable );
|
|
|
var clonedBody = $( dt.table().body() ).clone( false, false ).empty().appendTo( clonedTable );
|
|
|
|
|
|
+ clonedTable.style.width = 'auto';
|
|
|
+
|
|
|
|
|
|
var headerCells = dt.columns()
|
|
|
.header()
|
|
@@ -860,6 +909,7 @@ $.extend( Responsive.prototype, {
|
|
|
.to$()
|
|
|
.clone( false )
|
|
|
.css( 'display', 'table-cell' )
|
|
|
+ .css( 'width', 'auto' )
|
|
|
.css( 'min-width', 0 );
|
|
|
|
|
|
|
|
@@ -927,6 +977,23 @@ $.extend( Responsive.prototype, {
|
|
|
},
|
|
|
|
|
|
|
|
|
+ * 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 ( 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
|
|
@@ -1179,8 +1246,12 @@ Responsive.renderer = {
|
|
|
|
|
|
var data = $.each( columns, function ( i, col ) {
|
|
|
if ( col.hidden ) {
|
|
|
+ var klass = col.className ?
|
|
|
+ 'class="'+ col.className +'"' :
|
|
|
+ '';
|
|
|
+
|
|
|
$(
|
|
|
- '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
|
|
|
+ '<li '+klass+' data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
|
|
|
'<span class="dtr-title">'+
|
|
|
col.title+
|
|
|
'</span> '+
|
|
@@ -1202,8 +1273,12 @@ Responsive.renderer = {
|
|
|
listHidden: function () {
|
|
|
return function ( api, rowIdx, columns ) {
|
|
|
var data = $.map( columns, function ( col ) {
|
|
|
+ var klass = col.className ?
|
|
|
+ 'class="'+ col.className +'"' :
|
|
|
+ '';
|
|
|
+
|
|
|
return col.hidden ?
|
|
|
- '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
|
|
|
+ '<li '+klass+' data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
|
|
|
'<span class="dtr-title">'+
|
|
|
col.title+
|
|
|
'</span> '+
|
|
@@ -1227,7 +1302,11 @@ Responsive.renderer = {
|
|
|
|
|
|
return function ( api, rowIdx, columns ) {
|
|
|
var data = $.map( columns, function ( col ) {
|
|
|
- return '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
|
|
|
+ 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>';
|
|
@@ -1343,14 +1422,14 @@ Api.register( 'responsive.hasHidden()', function () {
|
|
|
var ctx = this.context[0];
|
|
|
|
|
|
return ctx._responsive ?
|
|
|
- $.inArray( false, ctx._responsive.s.current ) !== -1 :
|
|
|
+ $.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.s.current[ column ] :
|
|
|
+ settings._responsive._responsiveOnlyHidden()[ column ] :
|
|
|
false;
|
|
|
}, 1 );
|
|
|
} );
|
|
@@ -1362,7 +1441,7 @@ Api.registerPlural( 'columns().responsiveHidden()', 'column().responsiveHidden()
|
|
|
* @name Responsive.version
|
|
|
* @static
|
|
|
*/
|
|
|
-Responsive.version = '2.2.3';
|
|
|
+Responsive.version = '2.2.5';
|
|
|
|
|
|
|
|
|
$.fn.dataTable.Responsive = Responsive;
|