resizable + stickyHeaders: replace window resize trigger. Fixes #912

This commit is contained in:
Mottie 2015-05-21 18:34:59 -05:00
parent 06d69c75b3
commit 1880d775ef
14 changed files with 429 additions and 325 deletions

View File

@ -1,4 +1,4 @@
/*! tablesorter (FORK) - updated 05-18-2015 (v2.22.1)*/ /*! tablesorter (FORK) - updated 05-21-2015 (v2.22.1)*/
/* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */ /* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
(function(factory) { (function(factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
@ -1407,10 +1407,11 @@
} }
// ignore mouseup if mousedown wasn't on the same target // ignore mouseup if mousedown wasn't on the same target
if ( type.match(' ' + c.pointerUp + ' ') && downTarget !== e.target && external !== true ) { return; } if ( type.match(' ' + c.pointerUp + ' ') && downTarget !== e.target && external !== true ) { return; }
// set timer on mousedown // set target on mousedown
if ( type.match(' ' + c.pointerDown + ' ') ) { if ( type.match(' ' + c.pointerDown + ' ') ) {
downTarget = e.target; downTarget = e.target;
// needed or jQuery v1.3.2 or older throws an "Uncaught TypeError: handler.apply is not a function" error // preventDefault needed or jQuery v1.3.2 and older throws an
// "Uncaught TypeError: handler.apply is not a function" error
temp = $target.jquery.split( '.' ); temp = $target.jquery.split( '.' );
if ( temp[0] === '1' && temp[1] < 4 ) { e.preventDefault(); } if ( temp[0] === '1' && temp[1] < 4 ) { e.preventDefault(); }
return; return;
@ -4123,26 +4124,28 @@ $.extend(ts.css, {
// Add a resize event to table headers // Add a resize event to table headers
ts.addHeaderResizeEvent = function(table, disable, settings) { ts.addHeaderResizeEvent = function(table, disable, settings) {
table = $(table)[0]; // make sure we're using a dom element table = $(table)[0]; // make sure we're using a dom element
var headers, if ( !table.config ) { return; }
defaults = { var defaults = {
timer : 250 timer : 250
}, },
options = $.extend({}, defaults, settings), options = $.extend({}, defaults, settings),
c = table.config, c = table.config,
wo = c.widgetOptions, wo = c.widgetOptions,
checkSizes = function( triggerEvent ) { checkSizes = function( triggerEvent ) {
var index, headers, $header, sizes, width, height,
len = c.$headers.length;
wo.resize_flag = true; wo.resize_flag = true;
headers = []; headers = [];
c.$headers.each(function() { for ( index = 0; index < len; index++ ) {
var $header = $(this), $header = c.$headers.eq( index );
sizes = $header.data('savedSizes') || [0,0], // fixes #394 sizes = $header.data( 'savedSizes' ) || [ 0,0 ]; // fixes #394
width = this.offsetWidth, width = $header[0].offsetWidth;
height = this.offsetHeight; height = $header[0].offsetHeight;
if ( width !== sizes[0] || height !== sizes[1] ) { if ( width !== sizes[0] || height !== sizes[1] ) {
$header.data( 'savedSizes', [ width, height ] ); $header.data( 'savedSizes', [ width, height ] );
headers.push(this); headers.push( $header[0] );
}
} }
});
if ( headers.length && triggerEvent !== false ) { if ( headers.length && triggerEvent !== false ) {
c.$table.trigger( 'resize', [ headers ] ); c.$table.trigger( 'resize', [ headers ] );
} }
@ -4184,7 +4187,8 @@ ts.addWidget({
if ( c.$table.hasClass('hasStickyHeaders') || ($.inArray('filter', c.widgets) >= 0 && !c.$table.hasClass('hasFilters')) ) { if ( c.$table.hasClass('hasStickyHeaders') || ($.inArray('filter', c.widgets) >= 0 && !c.$table.hasClass('hasFilters')) ) {
return; return;
} }
var $table = c.$table, var index, len, $t,
$table = c.$table,
// add position: relative to attach element, hopefully it won't cause trouble. // add position: relative to attach element, hopefully it won't cause trouble.
$attach = $(wo.stickyHeaders_attachTo), $attach = $(wo.stickyHeaders_attachTo),
namespace = c.namespace + 'stickyheaders ', namespace = c.namespace + 'stickyheaders ',
@ -4219,10 +4223,12 @@ ts.addWidget({
laststate = '', laststate = '',
spacing = 0, spacing = 0,
setWidth = function($orig, $clone){ setWidth = function($orig, $clone){
$orig.filter(':visible').each(function(i) { var index, width, border, $cell, $this,
var width, border, $cells = $orig.filter(':visible'),
$cell = $clone.filter(':visible').eq(i), len = $cells.length;
$this = $(this); for ( index = 0; index < len; index++ ) {
$cell = $clone.filter(':visible').eq(index);
$this = $cells.eq(index);
// code from https://github.com/jmosbech/StickyTableHeaders // code from https://github.com/jmosbech/StickyTableHeaders
if ($this.css('box-sizing') === 'border-box') { if ($this.css('box-sizing') === 'border-box') {
width = $this.outerWidth(); width = $this.outerWidth();
@ -4240,10 +4246,11 @@ ts.addWidget({
} }
} }
$cell.css({ $cell.css({
'width': width,
'min-width': width, 'min-width': width,
'max-width': width 'max-width': width
}); });
}); }
}, },
resizeHeader = function() { resizeHeader = function() {
stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0; stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0;
@ -4255,6 +4262,39 @@ ts.addWidget({
}); });
setWidth( $table, $stickyTable ); setWidth( $table, $stickyTable );
setWidth( $header, $stickyCells ); setWidth( $header, $stickyCells );
},
scrollSticky = function( resizing ) {
if (!$table.is(':visible')) { return; } // fixes #278
// Detect nested tables - fixes #724
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
var offset = $table.offset(),
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3
xWindow = $.isWindow( $xScroll[0] ),
// scrollTop = ( $attach.length ? $attach.offset().top : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
scrollTop = ( $attach.length ? ( yWindow ? $yScroll.scrollTop() : $yScroll.offset().top ) : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
tableHeight = $table.height() - ($stickyWrap.height() + ($tfoot.height() || 0)),
isVisible = ( scrollTop > offset.top ) && ( scrollTop < offset.top + tableHeight ) ? 'visible' : 'hidden',
cssSettings = { visibility : isVisible };
if ($attach.length) {
cssSettings.top = yWindow ? scrollTop - $attach.offset().top : $attach.scrollTop();
}
if (xWindow) {
// adjust when scrolling horizontally - fixes issue #143
cssSettings.left = $table.offset().left - parseInt($table.css('margin-left'), 10) - $xScroll.scrollLeft() - spacing;
}
if ($nestedSticky.length) {
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
}
$stickyWrap
.removeClass( ts.css.stickyVis + ' ' + ts.css.stickyHide )
.addClass( isVisible === 'visible' ? ts.css.stickyVis : ts.css.stickyHide )
.css(cssSettings);
if (isVisible !== laststate || resizing) {
// make sure the column widths match
resizeHeader();
laststate = isVisible;
}
}; };
// only add a position relative if a position isn't already defined // only add a position relative if a position isn't already defined
if ($attach.length && !$attach.css('position')) { if ($attach.length && !$attach.css('position')) {
@ -4286,48 +4326,26 @@ ts.addWidget({
// onRenderHeader is defined, we need to do something about it (fixes #641) // onRenderHeader is defined, we need to do something about it (fixes #641)
if (c.onRenderHeader) { if (c.onRenderHeader) {
$stickyThead.children('tr').children().each(function(index){ $t = $stickyThead.children('tr').children();
len = $t.length;
for ( index = 0; index < len; index++ ) {
// send second parameter // send second parameter
c.onRenderHeader.apply( $(this), [ index, c, $stickyTable ] ); c.onRenderHeader.apply( $t.eq( index ), [ index, c, $stickyTable ] );
}); }
} }
// make it sticky! // make it sticky!
$xScroll.add($yScroll) $xScroll.add($yScroll)
.unbind( ('scroll resize '.split(' ').join( namespace )).replace(/\s+/g, ' ') ) .unbind( ('scroll resize '.split(' ').join( namespace )).replace(/\s+/g, ' ') )
.bind('scroll resize '.split(' ').join( namespace ), function( event ) { .bind('scroll resize '.split(' ').join( namespace ), function( event ) {
if (!$table.is(':visible')) { return; } // fixes #278 scrollSticky( event.type === 'resize' );
// Detect nested tables - fixes #724
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
var offset = $table.offset(),
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3
xWindow = $.isWindow( $xScroll[0] ),
// scrollTop = ( $attach.length ? $attach.offset().top : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
scrollTop = ( $attach.length ? ( yWindow ? $yScroll.scrollTop() : $yScroll.offset().top ) : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
tableHeight = $table.height() - ($stickyWrap.height() + ($tfoot.height() || 0)),
isVisible = ( scrollTop > offset.top ) && ( scrollTop < offset.top + tableHeight ) ? 'visible' : 'hidden',
cssSettings = { visibility : isVisible };
if ($attach.length) {
cssSettings.top = yWindow ? scrollTop - $attach.offset().top : $attach.scrollTop();
}
if (xWindow) {
// adjust when scrolling horizontally - fixes issue #143
cssSettings.left = $table.offset().left - parseInt($table.css('margin-left'), 10) - $xScroll.scrollLeft() - spacing;
}
if ($nestedSticky.length) {
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
}
$stickyWrap
.removeClass( ts.css.stickyVis + ' ' + ts.css.stickyHide )
.addClass( isVisible === 'visible' ? ts.css.stickyVis : ts.css.stickyHide )
.css(cssSettings);
if (isVisible !== laststate || event.type === 'resize') {
// make sure the column widths match
resizeHeader();
laststate = isVisible;
}
}); });
c.$table
.unbind('stickyHeadersUpdate' + namespace)
.bind('stickyHeadersUpdate' + namespace, function(){
scrollSticky( true );
});
if (wo.stickyHeaders_addResizeEvent) { if (wo.stickyHeaders_addResizeEvent) {
ts.addHeaderResizeEvent(table); ts.addHeaderResizeEvent(table);
} }
@ -4363,7 +4381,7 @@ ts.addWidget({
var namespace = c.namespace + 'stickyheaders '; var namespace = c.namespace + 'stickyheaders ';
c.$table c.$table
.removeClass('hasStickyHeaders') .removeClass('hasStickyHeaders')
.unbind( ('pagerComplete filterEnd '.split(' ').join(namespace)).replace(/\s+/g, ' ') ) .unbind( ('pagerComplete filterEnd stickyHeadersUpdate '.split(' ').join(namespace)).replace(/\s+/g, ' ') )
.next('.' + ts.css.stickyWrap).remove(); .next('.' + ts.css.stickyWrap).remove();
if (wo.$sticky && wo.$sticky.length) { wo.$sticky.remove(); } // remove cloned table if (wo.$sticky && wo.$sticky.length) { wo.$sticky.remove(); } // remove cloned table
$(window) $(window)
@ -4630,6 +4648,8 @@ ts.resizable = {
ts.resizable.setWidths( c, wo ); ts.resizable.setWidths( c, wo );
} }
vars.mouseXPosition = event.pageX; vars.mouseXPosition = event.pageX;
// dynamically update sticky header widths
c.$table.trigger('stickyHeadersUpdate');
}, },
stopResize : function( c, wo ) { stopResize : function( c, wo ) {
@ -4649,7 +4669,8 @@ ts.resizable = {
} }
vars.mouseXPosition = 0; vars.mouseXPosition = 0;
vars.$target = vars.$next = null; vars.$target = vars.$next = null;
$(window).trigger('resize'); // will update stickyHeaders, just in case // will update stickyHeaders, just in case, see #912
c.$table.trigger('stickyHeadersUpdate');
} }
}; };
@ -4700,7 +4721,7 @@ ts.resizableReset = function( table, refreshing ) {
} }
} }
// reset stickyHeader widths // reset stickyHeader widths
$( window ).trigger( 'resize' ); c.$table.trigger( 'stickyHeadersUpdate' );
if ( ts.storage && !refreshing ) { if ( ts.storage && !refreshing ) {
ts.storage( this, ts.css.resizableStorage, {} ); ts.storage( this, ts.css.resizableStorage, {} );
} }

File diff suppressed because one or more lines are too long

View File

@ -1405,10 +1405,11 @@
} }
// ignore mouseup if mousedown wasn't on the same target // ignore mouseup if mousedown wasn't on the same target
if ( type.match(' ' + c.pointerUp + ' ') && downTarget !== e.target && external !== true ) { return; } if ( type.match(' ' + c.pointerUp + ' ') && downTarget !== e.target && external !== true ) { return; }
// set timer on mousedown // set target on mousedown
if ( type.match(' ' + c.pointerDown + ' ') ) { if ( type.match(' ' + c.pointerDown + ' ') ) {
downTarget = e.target; downTarget = e.target;
// needed or jQuery v1.3.2 or older throws an "Uncaught TypeError: handler.apply is not a function" error // preventDefault needed or jQuery v1.3.2 and older throws an
// "Uncaught TypeError: handler.apply is not a function" error
temp = $target.jquery.split( '.' ); temp = $target.jquery.split( '.' );
if ( temp[0] === '1' && temp[1] < 4 ) { e.preventDefault(); } if ( temp[0] === '1' && temp[1] < 4 ) { e.preventDefault(); }
return; return;

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
/*! tablesorter (FORK) - updated 05-18-2015 (v2.22.1)*/ /*! tablesorter (FORK) - updated 05-21-2015 (v2.22.1)*/
/* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */ /* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
(function(factory) { (function(factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
@ -1949,26 +1949,28 @@ $.extend(ts.css, {
// Add a resize event to table headers // Add a resize event to table headers
ts.addHeaderResizeEvent = function(table, disable, settings) { ts.addHeaderResizeEvent = function(table, disable, settings) {
table = $(table)[0]; // make sure we're using a dom element table = $(table)[0]; // make sure we're using a dom element
var headers, if ( !table.config ) { return; }
defaults = { var defaults = {
timer : 250 timer : 250
}, },
options = $.extend({}, defaults, settings), options = $.extend({}, defaults, settings),
c = table.config, c = table.config,
wo = c.widgetOptions, wo = c.widgetOptions,
checkSizes = function( triggerEvent ) { checkSizes = function( triggerEvent ) {
var index, headers, $header, sizes, width, height,
len = c.$headers.length;
wo.resize_flag = true; wo.resize_flag = true;
headers = []; headers = [];
c.$headers.each(function() { for ( index = 0; index < len; index++ ) {
var $header = $(this), $header = c.$headers.eq( index );
sizes = $header.data('savedSizes') || [0,0], // fixes #394 sizes = $header.data( 'savedSizes' ) || [ 0,0 ]; // fixes #394
width = this.offsetWidth, width = $header[0].offsetWidth;
height = this.offsetHeight; height = $header[0].offsetHeight;
if ( width !== sizes[0] || height !== sizes[1] ) { if ( width !== sizes[0] || height !== sizes[1] ) {
$header.data( 'savedSizes', [ width, height ] ); $header.data( 'savedSizes', [ width, height ] );
headers.push(this); headers.push( $header[0] );
}
} }
});
if ( headers.length && triggerEvent !== false ) { if ( headers.length && triggerEvent !== false ) {
c.$table.trigger( 'resize', [ headers ] ); c.$table.trigger( 'resize', [ headers ] );
} }
@ -2010,7 +2012,8 @@ ts.addWidget({
if ( c.$table.hasClass('hasStickyHeaders') || ($.inArray('filter', c.widgets) >= 0 && !c.$table.hasClass('hasFilters')) ) { if ( c.$table.hasClass('hasStickyHeaders') || ($.inArray('filter', c.widgets) >= 0 && !c.$table.hasClass('hasFilters')) ) {
return; return;
} }
var $table = c.$table, var index, len, $t,
$table = c.$table,
// add position: relative to attach element, hopefully it won't cause trouble. // add position: relative to attach element, hopefully it won't cause trouble.
$attach = $(wo.stickyHeaders_attachTo), $attach = $(wo.stickyHeaders_attachTo),
namespace = c.namespace + 'stickyheaders ', namespace = c.namespace + 'stickyheaders ',
@ -2045,10 +2048,12 @@ ts.addWidget({
laststate = '', laststate = '',
spacing = 0, spacing = 0,
setWidth = function($orig, $clone){ setWidth = function($orig, $clone){
$orig.filter(':visible').each(function(i) { var index, width, border, $cell, $this,
var width, border, $cells = $orig.filter(':visible'),
$cell = $clone.filter(':visible').eq(i), len = $cells.length;
$this = $(this); for ( index = 0; index < len; index++ ) {
$cell = $clone.filter(':visible').eq(index);
$this = $cells.eq(index);
// code from https://github.com/jmosbech/StickyTableHeaders // code from https://github.com/jmosbech/StickyTableHeaders
if ($this.css('box-sizing') === 'border-box') { if ($this.css('box-sizing') === 'border-box') {
width = $this.outerWidth(); width = $this.outerWidth();
@ -2066,10 +2071,11 @@ ts.addWidget({
} }
} }
$cell.css({ $cell.css({
'width': width,
'min-width': width, 'min-width': width,
'max-width': width 'max-width': width
}); });
}); }
}, },
resizeHeader = function() { resizeHeader = function() {
stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0; stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0;
@ -2081,6 +2087,39 @@ ts.addWidget({
}); });
setWidth( $table, $stickyTable ); setWidth( $table, $stickyTable );
setWidth( $header, $stickyCells ); setWidth( $header, $stickyCells );
},
scrollSticky = function( resizing ) {
if (!$table.is(':visible')) { return; } // fixes #278
// Detect nested tables - fixes #724
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
var offset = $table.offset(),
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3
xWindow = $.isWindow( $xScroll[0] ),
// scrollTop = ( $attach.length ? $attach.offset().top : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
scrollTop = ( $attach.length ? ( yWindow ? $yScroll.scrollTop() : $yScroll.offset().top ) : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
tableHeight = $table.height() - ($stickyWrap.height() + ($tfoot.height() || 0)),
isVisible = ( scrollTop > offset.top ) && ( scrollTop < offset.top + tableHeight ) ? 'visible' : 'hidden',
cssSettings = { visibility : isVisible };
if ($attach.length) {
cssSettings.top = yWindow ? scrollTop - $attach.offset().top : $attach.scrollTop();
}
if (xWindow) {
// adjust when scrolling horizontally - fixes issue #143
cssSettings.left = $table.offset().left - parseInt($table.css('margin-left'), 10) - $xScroll.scrollLeft() - spacing;
}
if ($nestedSticky.length) {
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
}
$stickyWrap
.removeClass( ts.css.stickyVis + ' ' + ts.css.stickyHide )
.addClass( isVisible === 'visible' ? ts.css.stickyVis : ts.css.stickyHide )
.css(cssSettings);
if (isVisible !== laststate || resizing) {
// make sure the column widths match
resizeHeader();
laststate = isVisible;
}
}; };
// only add a position relative if a position isn't already defined // only add a position relative if a position isn't already defined
if ($attach.length && !$attach.css('position')) { if ($attach.length && !$attach.css('position')) {
@ -2112,48 +2151,26 @@ ts.addWidget({
// onRenderHeader is defined, we need to do something about it (fixes #641) // onRenderHeader is defined, we need to do something about it (fixes #641)
if (c.onRenderHeader) { if (c.onRenderHeader) {
$stickyThead.children('tr').children().each(function(index){ $t = $stickyThead.children('tr').children();
len = $t.length;
for ( index = 0; index < len; index++ ) {
// send second parameter // send second parameter
c.onRenderHeader.apply( $(this), [ index, c, $stickyTable ] ); c.onRenderHeader.apply( $t.eq( index ), [ index, c, $stickyTable ] );
}); }
} }
// make it sticky! // make it sticky!
$xScroll.add($yScroll) $xScroll.add($yScroll)
.unbind( ('scroll resize '.split(' ').join( namespace )).replace(/\s+/g, ' ') ) .unbind( ('scroll resize '.split(' ').join( namespace )).replace(/\s+/g, ' ') )
.bind('scroll resize '.split(' ').join( namespace ), function( event ) { .bind('scroll resize '.split(' ').join( namespace ), function( event ) {
if (!$table.is(':visible')) { return; } // fixes #278 scrollSticky( event.type === 'resize' );
// Detect nested tables - fixes #724
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
var offset = $table.offset(),
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3
xWindow = $.isWindow( $xScroll[0] ),
// scrollTop = ( $attach.length ? $attach.offset().top : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
scrollTop = ( $attach.length ? ( yWindow ? $yScroll.scrollTop() : $yScroll.offset().top ) : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
tableHeight = $table.height() - ($stickyWrap.height() + ($tfoot.height() || 0)),
isVisible = ( scrollTop > offset.top ) && ( scrollTop < offset.top + tableHeight ) ? 'visible' : 'hidden',
cssSettings = { visibility : isVisible };
if ($attach.length) {
cssSettings.top = yWindow ? scrollTop - $attach.offset().top : $attach.scrollTop();
}
if (xWindow) {
// adjust when scrolling horizontally - fixes issue #143
cssSettings.left = $table.offset().left - parseInt($table.css('margin-left'), 10) - $xScroll.scrollLeft() - spacing;
}
if ($nestedSticky.length) {
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
}
$stickyWrap
.removeClass( ts.css.stickyVis + ' ' + ts.css.stickyHide )
.addClass( isVisible === 'visible' ? ts.css.stickyVis : ts.css.stickyHide )
.css(cssSettings);
if (isVisible !== laststate || event.type === 'resize') {
// make sure the column widths match
resizeHeader();
laststate = isVisible;
}
}); });
c.$table
.unbind('stickyHeadersUpdate' + namespace)
.bind('stickyHeadersUpdate' + namespace, function(){
scrollSticky( true );
});
if (wo.stickyHeaders_addResizeEvent) { if (wo.stickyHeaders_addResizeEvent) {
ts.addHeaderResizeEvent(table); ts.addHeaderResizeEvent(table);
} }
@ -2189,7 +2206,7 @@ ts.addWidget({
var namespace = c.namespace + 'stickyheaders '; var namespace = c.namespace + 'stickyheaders ';
c.$table c.$table
.removeClass('hasStickyHeaders') .removeClass('hasStickyHeaders')
.unbind( ('pagerComplete filterEnd '.split(' ').join(namespace)).replace(/\s+/g, ' ') ) .unbind( ('pagerComplete filterEnd stickyHeadersUpdate '.split(' ').join(namespace)).replace(/\s+/g, ' ') )
.next('.' + ts.css.stickyWrap).remove(); .next('.' + ts.css.stickyWrap).remove();
if (wo.$sticky && wo.$sticky.length) { wo.$sticky.remove(); } // remove cloned table if (wo.$sticky && wo.$sticky.length) { wo.$sticky.remove(); } // remove cloned table
$(window) $(window)
@ -2456,6 +2473,8 @@ ts.resizable = {
ts.resizable.setWidths( c, wo ); ts.resizable.setWidths( c, wo );
} }
vars.mouseXPosition = event.pageX; vars.mouseXPosition = event.pageX;
// dynamically update sticky header widths
c.$table.trigger('stickyHeadersUpdate');
}, },
stopResize : function( c, wo ) { stopResize : function( c, wo ) {
@ -2475,7 +2494,8 @@ ts.resizable = {
} }
vars.mouseXPosition = 0; vars.mouseXPosition = 0;
vars.$target = vars.$next = null; vars.$target = vars.$next = null;
$(window).trigger('resize'); // will update stickyHeaders, just in case // will update stickyHeaders, just in case, see #912
c.$table.trigger('stickyHeadersUpdate');
} }
}; };
@ -2526,7 +2546,7 @@ ts.resizableReset = function( table, refreshing ) {
} }
} }
// reset stickyHeader widths // reset stickyHeader widths
$( window ).trigger( 'resize' ); c.$table.trigger( 'stickyHeadersUpdate' );
if ( ts.storage && !refreshing ) { if ( ts.storage && !refreshing ) {
ts.storage( this, ts.css.resizableStorage, {} ); ts.storage( this, ts.css.resizableStorage, {} );
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -412,8 +412,8 @@ $(function() {
<h3>Sticky headers in a popup window</h3> <h3>Sticky headers in a popup window</h3>
<ul> <ul>
<li><a href="#popup" class="open-popup-link">Show table in Magnific popup window</a></li> <li><a href="#popup" class="open-popup-link">Show table in Magnific popup window</a></li>
<li><a href="http://jsfiddle.net/Mottie/8j08gbzb/">Show table in jQuery UI Dialog</a></li> <li><a class="external" href="http://jsfiddle.net/Mottie/8j08gbzb/">Show table in jQuery UI Dialog</a></li>
<li><a href="http://jsfiddle.net/Mottie/Leyaxm70/">Show table in Bootstrap Modal</a></li> <li><a class="external" href="http://jsfiddle.net/Mottie/Leyaxm70/">Show table in Bootstrap Modal</a></li>
</ul> </ul>
<div id="popup" class="white-popup mfp-hide"> <div id="popup" class="white-popup mfp-hide">

View File

@ -4,7 +4,7 @@
*/ */
/*! tablesorter (FORK) - updated 05-18-2015 (v2.22.1)*/ /*! tablesorter (FORK) - updated 05-21-2015 (v2.22.1)*/
/* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */ /* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
(function(factory) { (function(factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
@ -1413,10 +1413,11 @@
} }
// ignore mouseup if mousedown wasn't on the same target // ignore mouseup if mousedown wasn't on the same target
if ( type.match(' ' + c.pointerUp + ' ') && downTarget !== e.target && external !== true ) { return; } if ( type.match(' ' + c.pointerUp + ' ') && downTarget !== e.target && external !== true ) { return; }
// set timer on mousedown // set target on mousedown
if ( type.match(' ' + c.pointerDown + ' ') ) { if ( type.match(' ' + c.pointerDown + ' ') ) {
downTarget = e.target; downTarget = e.target;
// needed or jQuery v1.3.2 or older throws an "Uncaught TypeError: handler.apply is not a function" error // preventDefault needed or jQuery v1.3.2 and older throws an
// "Uncaught TypeError: handler.apply is not a function" error
temp = $target.jquery.split( '.' ); temp = $target.jquery.split( '.' );
if ( temp[0] === '1' && temp[1] < 4 ) { e.preventDefault(); } if ( temp[0] === '1' && temp[1] < 4 ) { e.preventDefault(); }
return; return;
@ -4129,26 +4130,28 @@ $.extend(ts.css, {
// Add a resize event to table headers // Add a resize event to table headers
ts.addHeaderResizeEvent = function(table, disable, settings) { ts.addHeaderResizeEvent = function(table, disable, settings) {
table = $(table)[0]; // make sure we're using a dom element table = $(table)[0]; // make sure we're using a dom element
var headers, if ( !table.config ) { return; }
defaults = { var defaults = {
timer : 250 timer : 250
}, },
options = $.extend({}, defaults, settings), options = $.extend({}, defaults, settings),
c = table.config, c = table.config,
wo = c.widgetOptions, wo = c.widgetOptions,
checkSizes = function( triggerEvent ) { checkSizes = function( triggerEvent ) {
var index, headers, $header, sizes, width, height,
len = c.$headers.length;
wo.resize_flag = true; wo.resize_flag = true;
headers = []; headers = [];
c.$headers.each(function() { for ( index = 0; index < len; index++ ) {
var $header = $(this), $header = c.$headers.eq( index );
sizes = $header.data('savedSizes') || [0,0], // fixes #394 sizes = $header.data( 'savedSizes' ) || [ 0,0 ]; // fixes #394
width = this.offsetWidth, width = $header[0].offsetWidth;
height = this.offsetHeight; height = $header[0].offsetHeight;
if ( width !== sizes[0] || height !== sizes[1] ) { if ( width !== sizes[0] || height !== sizes[1] ) {
$header.data( 'savedSizes', [ width, height ] ); $header.data( 'savedSizes', [ width, height ] );
headers.push(this); headers.push( $header[0] );
}
} }
});
if ( headers.length && triggerEvent !== false ) { if ( headers.length && triggerEvent !== false ) {
c.$table.trigger( 'resize', [ headers ] ); c.$table.trigger( 'resize', [ headers ] );
} }
@ -4190,7 +4193,8 @@ ts.addWidget({
if ( c.$table.hasClass('hasStickyHeaders') || ($.inArray('filter', c.widgets) >= 0 && !c.$table.hasClass('hasFilters')) ) { if ( c.$table.hasClass('hasStickyHeaders') || ($.inArray('filter', c.widgets) >= 0 && !c.$table.hasClass('hasFilters')) ) {
return; return;
} }
var $table = c.$table, var index, len, $t,
$table = c.$table,
// add position: relative to attach element, hopefully it won't cause trouble. // add position: relative to attach element, hopefully it won't cause trouble.
$attach = $(wo.stickyHeaders_attachTo), $attach = $(wo.stickyHeaders_attachTo),
namespace = c.namespace + 'stickyheaders ', namespace = c.namespace + 'stickyheaders ',
@ -4225,10 +4229,12 @@ ts.addWidget({
laststate = '', laststate = '',
spacing = 0, spacing = 0,
setWidth = function($orig, $clone){ setWidth = function($orig, $clone){
$orig.filter(':visible').each(function(i) { var index, width, border, $cell, $this,
var width, border, $cells = $orig.filter(':visible'),
$cell = $clone.filter(':visible').eq(i), len = $cells.length;
$this = $(this); for ( index = 0; index < len; index++ ) {
$cell = $clone.filter(':visible').eq(index);
$this = $cells.eq(index);
// code from https://github.com/jmosbech/StickyTableHeaders // code from https://github.com/jmosbech/StickyTableHeaders
if ($this.css('box-sizing') === 'border-box') { if ($this.css('box-sizing') === 'border-box') {
width = $this.outerWidth(); width = $this.outerWidth();
@ -4246,10 +4252,11 @@ ts.addWidget({
} }
} }
$cell.css({ $cell.css({
'width': width,
'min-width': width, 'min-width': width,
'max-width': width 'max-width': width
}); });
}); }
}, },
resizeHeader = function() { resizeHeader = function() {
stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0; stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0;
@ -4261,6 +4268,39 @@ ts.addWidget({
}); });
setWidth( $table, $stickyTable ); setWidth( $table, $stickyTable );
setWidth( $header, $stickyCells ); setWidth( $header, $stickyCells );
},
scrollSticky = function( resizing ) {
if (!$table.is(':visible')) { return; } // fixes #278
// Detect nested tables - fixes #724
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
var offset = $table.offset(),
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3
xWindow = $.isWindow( $xScroll[0] ),
// scrollTop = ( $attach.length ? $attach.offset().top : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
scrollTop = ( $attach.length ? ( yWindow ? $yScroll.scrollTop() : $yScroll.offset().top ) : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
tableHeight = $table.height() - ($stickyWrap.height() + ($tfoot.height() || 0)),
isVisible = ( scrollTop > offset.top ) && ( scrollTop < offset.top + tableHeight ) ? 'visible' : 'hidden',
cssSettings = { visibility : isVisible };
if ($attach.length) {
cssSettings.top = yWindow ? scrollTop - $attach.offset().top : $attach.scrollTop();
}
if (xWindow) {
// adjust when scrolling horizontally - fixes issue #143
cssSettings.left = $table.offset().left - parseInt($table.css('margin-left'), 10) - $xScroll.scrollLeft() - spacing;
}
if ($nestedSticky.length) {
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
}
$stickyWrap
.removeClass( ts.css.stickyVis + ' ' + ts.css.stickyHide )
.addClass( isVisible === 'visible' ? ts.css.stickyVis : ts.css.stickyHide )
.css(cssSettings);
if (isVisible !== laststate || resizing) {
// make sure the column widths match
resizeHeader();
laststate = isVisible;
}
}; };
// only add a position relative if a position isn't already defined // only add a position relative if a position isn't already defined
if ($attach.length && !$attach.css('position')) { if ($attach.length && !$attach.css('position')) {
@ -4292,48 +4332,26 @@ ts.addWidget({
// onRenderHeader is defined, we need to do something about it (fixes #641) // onRenderHeader is defined, we need to do something about it (fixes #641)
if (c.onRenderHeader) { if (c.onRenderHeader) {
$stickyThead.children('tr').children().each(function(index){ $t = $stickyThead.children('tr').children();
len = $t.length;
for ( index = 0; index < len; index++ ) {
// send second parameter // send second parameter
c.onRenderHeader.apply( $(this), [ index, c, $stickyTable ] ); c.onRenderHeader.apply( $t.eq( index ), [ index, c, $stickyTable ] );
}); }
} }
// make it sticky! // make it sticky!
$xScroll.add($yScroll) $xScroll.add($yScroll)
.unbind( ('scroll resize '.split(' ').join( namespace )).replace(/\s+/g, ' ') ) .unbind( ('scroll resize '.split(' ').join( namespace )).replace(/\s+/g, ' ') )
.bind('scroll resize '.split(' ').join( namespace ), function( event ) { .bind('scroll resize '.split(' ').join( namespace ), function( event ) {
if (!$table.is(':visible')) { return; } // fixes #278 scrollSticky( event.type === 'resize' );
// Detect nested tables - fixes #724
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
var offset = $table.offset(),
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3
xWindow = $.isWindow( $xScroll[0] ),
// scrollTop = ( $attach.length ? $attach.offset().top : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
scrollTop = ( $attach.length ? ( yWindow ? $yScroll.scrollTop() : $yScroll.offset().top ) : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
tableHeight = $table.height() - ($stickyWrap.height() + ($tfoot.height() || 0)),
isVisible = ( scrollTop > offset.top ) && ( scrollTop < offset.top + tableHeight ) ? 'visible' : 'hidden',
cssSettings = { visibility : isVisible };
if ($attach.length) {
cssSettings.top = yWindow ? scrollTop - $attach.offset().top : $attach.scrollTop();
}
if (xWindow) {
// adjust when scrolling horizontally - fixes issue #143
cssSettings.left = $table.offset().left - parseInt($table.css('margin-left'), 10) - $xScroll.scrollLeft() - spacing;
}
if ($nestedSticky.length) {
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
}
$stickyWrap
.removeClass( ts.css.stickyVis + ' ' + ts.css.stickyHide )
.addClass( isVisible === 'visible' ? ts.css.stickyVis : ts.css.stickyHide )
.css(cssSettings);
if (isVisible !== laststate || event.type === 'resize') {
// make sure the column widths match
resizeHeader();
laststate = isVisible;
}
}); });
c.$table
.unbind('stickyHeadersUpdate' + namespace)
.bind('stickyHeadersUpdate' + namespace, function(){
scrollSticky( true );
});
if (wo.stickyHeaders_addResizeEvent) { if (wo.stickyHeaders_addResizeEvent) {
ts.addHeaderResizeEvent(table); ts.addHeaderResizeEvent(table);
} }
@ -4369,7 +4387,7 @@ ts.addWidget({
var namespace = c.namespace + 'stickyheaders '; var namespace = c.namespace + 'stickyheaders ';
c.$table c.$table
.removeClass('hasStickyHeaders') .removeClass('hasStickyHeaders')
.unbind( ('pagerComplete filterEnd '.split(' ').join(namespace)).replace(/\s+/g, ' ') ) .unbind( ('pagerComplete filterEnd stickyHeadersUpdate '.split(' ').join(namespace)).replace(/\s+/g, ' ') )
.next('.' + ts.css.stickyWrap).remove(); .next('.' + ts.css.stickyWrap).remove();
if (wo.$sticky && wo.$sticky.length) { wo.$sticky.remove(); } // remove cloned table if (wo.$sticky && wo.$sticky.length) { wo.$sticky.remove(); } // remove cloned table
$(window) $(window)
@ -4636,6 +4654,8 @@ ts.resizable = {
ts.resizable.setWidths( c, wo ); ts.resizable.setWidths( c, wo );
} }
vars.mouseXPosition = event.pageX; vars.mouseXPosition = event.pageX;
// dynamically update sticky header widths
c.$table.trigger('stickyHeadersUpdate');
}, },
stopResize : function( c, wo ) { stopResize : function( c, wo ) {
@ -4655,7 +4675,8 @@ ts.resizable = {
} }
vars.mouseXPosition = 0; vars.mouseXPosition = 0;
vars.$target = vars.$next = null; vars.$target = vars.$next = null;
$(window).trigger('resize'); // will update stickyHeaders, just in case // will update stickyHeaders, just in case, see #912
c.$table.trigger('stickyHeadersUpdate');
} }
}; };
@ -4706,7 +4727,7 @@ ts.resizableReset = function( table, refreshing ) {
} }
} }
// reset stickyHeader widths // reset stickyHeader widths
$( window ).trigger( 'resize' ); c.$table.trigger( 'stickyHeadersUpdate' );
if ( ts.storage && !refreshing ) { if ( ts.storage && !refreshing ) {
ts.storage( this, ts.css.resizableStorage, {} ); ts.storage( this, ts.css.resizableStorage, {} );
} }

View File

@ -1395,10 +1395,11 @@
} }
// ignore mouseup if mousedown wasn't on the same target // ignore mouseup if mousedown wasn't on the same target
if ( type.match(' ' + c.pointerUp + ' ') && downTarget !== e.target && external !== true ) { return; } if ( type.match(' ' + c.pointerUp + ' ') && downTarget !== e.target && external !== true ) { return; }
// set timer on mousedown // set target on mousedown
if ( type.match(' ' + c.pointerDown + ' ') ) { if ( type.match(' ' + c.pointerDown + ' ') ) {
downTarget = e.target; downTarget = e.target;
// needed or jQuery v1.3.2 or older throws an "Uncaught TypeError: handler.apply is not a function" error // preventDefault needed or jQuery v1.3.2 and older throws an
// "Uncaught TypeError: handler.apply is not a function" error
temp = $target.jquery.split( '.' ); temp = $target.jquery.split( '.' );
if ( temp[0] === '1' && temp[1] < 4 ) { e.preventDefault(); } if ( temp[0] === '1' && temp[1] < 4 ) { e.preventDefault(); }
return; return;

View File

@ -4,7 +4,7 @@
*/ */
/*! tablesorter (FORK) - updated 05-18-2015 (v2.22.1)*/ /*! tablesorter (FORK) - updated 05-21-2015 (v2.22.1)*/
/* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */ /* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
(function(factory) { (function(factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
@ -1955,26 +1955,28 @@ $.extend(ts.css, {
// Add a resize event to table headers // Add a resize event to table headers
ts.addHeaderResizeEvent = function(table, disable, settings) { ts.addHeaderResizeEvent = function(table, disable, settings) {
table = $(table)[0]; // make sure we're using a dom element table = $(table)[0]; // make sure we're using a dom element
var headers, if ( !table.config ) { return; }
defaults = { var defaults = {
timer : 250 timer : 250
}, },
options = $.extend({}, defaults, settings), options = $.extend({}, defaults, settings),
c = table.config, c = table.config,
wo = c.widgetOptions, wo = c.widgetOptions,
checkSizes = function( triggerEvent ) { checkSizes = function( triggerEvent ) {
var index, headers, $header, sizes, width, height,
len = c.$headers.length;
wo.resize_flag = true; wo.resize_flag = true;
headers = []; headers = [];
c.$headers.each(function() { for ( index = 0; index < len; index++ ) {
var $header = $(this), $header = c.$headers.eq( index );
sizes = $header.data('savedSizes') || [0,0], // fixes #394 sizes = $header.data( 'savedSizes' ) || [ 0,0 ]; // fixes #394
width = this.offsetWidth, width = $header[0].offsetWidth;
height = this.offsetHeight; height = $header[0].offsetHeight;
if ( width !== sizes[0] || height !== sizes[1] ) { if ( width !== sizes[0] || height !== sizes[1] ) {
$header.data( 'savedSizes', [ width, height ] ); $header.data( 'savedSizes', [ width, height ] );
headers.push(this); headers.push( $header[0] );
}
} }
});
if ( headers.length && triggerEvent !== false ) { if ( headers.length && triggerEvent !== false ) {
c.$table.trigger( 'resize', [ headers ] ); c.$table.trigger( 'resize', [ headers ] );
} }
@ -2016,7 +2018,8 @@ ts.addWidget({
if ( c.$table.hasClass('hasStickyHeaders') || ($.inArray('filter', c.widgets) >= 0 && !c.$table.hasClass('hasFilters')) ) { if ( c.$table.hasClass('hasStickyHeaders') || ($.inArray('filter', c.widgets) >= 0 && !c.$table.hasClass('hasFilters')) ) {
return; return;
} }
var $table = c.$table, var index, len, $t,
$table = c.$table,
// add position: relative to attach element, hopefully it won't cause trouble. // add position: relative to attach element, hopefully it won't cause trouble.
$attach = $(wo.stickyHeaders_attachTo), $attach = $(wo.stickyHeaders_attachTo),
namespace = c.namespace + 'stickyheaders ', namespace = c.namespace + 'stickyheaders ',
@ -2051,10 +2054,12 @@ ts.addWidget({
laststate = '', laststate = '',
spacing = 0, spacing = 0,
setWidth = function($orig, $clone){ setWidth = function($orig, $clone){
$orig.filter(':visible').each(function(i) { var index, width, border, $cell, $this,
var width, border, $cells = $orig.filter(':visible'),
$cell = $clone.filter(':visible').eq(i), len = $cells.length;
$this = $(this); for ( index = 0; index < len; index++ ) {
$cell = $clone.filter(':visible').eq(index);
$this = $cells.eq(index);
// code from https://github.com/jmosbech/StickyTableHeaders // code from https://github.com/jmosbech/StickyTableHeaders
if ($this.css('box-sizing') === 'border-box') { if ($this.css('box-sizing') === 'border-box') {
width = $this.outerWidth(); width = $this.outerWidth();
@ -2072,10 +2077,11 @@ ts.addWidget({
} }
} }
$cell.css({ $cell.css({
'width': width,
'min-width': width, 'min-width': width,
'max-width': width 'max-width': width
}); });
}); }
}, },
resizeHeader = function() { resizeHeader = function() {
stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0; stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0;
@ -2087,6 +2093,39 @@ ts.addWidget({
}); });
setWidth( $table, $stickyTable ); setWidth( $table, $stickyTable );
setWidth( $header, $stickyCells ); setWidth( $header, $stickyCells );
},
scrollSticky = function( resizing ) {
if (!$table.is(':visible')) { return; } // fixes #278
// Detect nested tables - fixes #724
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
var offset = $table.offset(),
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3
xWindow = $.isWindow( $xScroll[0] ),
// scrollTop = ( $attach.length ? $attach.offset().top : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
scrollTop = ( $attach.length ? ( yWindow ? $yScroll.scrollTop() : $yScroll.offset().top ) : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
tableHeight = $table.height() - ($stickyWrap.height() + ($tfoot.height() || 0)),
isVisible = ( scrollTop > offset.top ) && ( scrollTop < offset.top + tableHeight ) ? 'visible' : 'hidden',
cssSettings = { visibility : isVisible };
if ($attach.length) {
cssSettings.top = yWindow ? scrollTop - $attach.offset().top : $attach.scrollTop();
}
if (xWindow) {
// adjust when scrolling horizontally - fixes issue #143
cssSettings.left = $table.offset().left - parseInt($table.css('margin-left'), 10) - $xScroll.scrollLeft() - spacing;
}
if ($nestedSticky.length) {
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
}
$stickyWrap
.removeClass( ts.css.stickyVis + ' ' + ts.css.stickyHide )
.addClass( isVisible === 'visible' ? ts.css.stickyVis : ts.css.stickyHide )
.css(cssSettings);
if (isVisible !== laststate || resizing) {
// make sure the column widths match
resizeHeader();
laststate = isVisible;
}
}; };
// only add a position relative if a position isn't already defined // only add a position relative if a position isn't already defined
if ($attach.length && !$attach.css('position')) { if ($attach.length && !$attach.css('position')) {
@ -2118,48 +2157,26 @@ ts.addWidget({
// onRenderHeader is defined, we need to do something about it (fixes #641) // onRenderHeader is defined, we need to do something about it (fixes #641)
if (c.onRenderHeader) { if (c.onRenderHeader) {
$stickyThead.children('tr').children().each(function(index){ $t = $stickyThead.children('tr').children();
len = $t.length;
for ( index = 0; index < len; index++ ) {
// send second parameter // send second parameter
c.onRenderHeader.apply( $(this), [ index, c, $stickyTable ] ); c.onRenderHeader.apply( $t.eq( index ), [ index, c, $stickyTable ] );
}); }
} }
// make it sticky! // make it sticky!
$xScroll.add($yScroll) $xScroll.add($yScroll)
.unbind( ('scroll resize '.split(' ').join( namespace )).replace(/\s+/g, ' ') ) .unbind( ('scroll resize '.split(' ').join( namespace )).replace(/\s+/g, ' ') )
.bind('scroll resize '.split(' ').join( namespace ), function( event ) { .bind('scroll resize '.split(' ').join( namespace ), function( event ) {
if (!$table.is(':visible')) { return; } // fixes #278 scrollSticky( event.type === 'resize' );
// Detect nested tables - fixes #724
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
var offset = $table.offset(),
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3
xWindow = $.isWindow( $xScroll[0] ),
// scrollTop = ( $attach.length ? $attach.offset().top : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
scrollTop = ( $attach.length ? ( yWindow ? $yScroll.scrollTop() : $yScroll.offset().top ) : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
tableHeight = $table.height() - ($stickyWrap.height() + ($tfoot.height() || 0)),
isVisible = ( scrollTop > offset.top ) && ( scrollTop < offset.top + tableHeight ) ? 'visible' : 'hidden',
cssSettings = { visibility : isVisible };
if ($attach.length) {
cssSettings.top = yWindow ? scrollTop - $attach.offset().top : $attach.scrollTop();
}
if (xWindow) {
// adjust when scrolling horizontally - fixes issue #143
cssSettings.left = $table.offset().left - parseInt($table.css('margin-left'), 10) - $xScroll.scrollLeft() - spacing;
}
if ($nestedSticky.length) {
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
}
$stickyWrap
.removeClass( ts.css.stickyVis + ' ' + ts.css.stickyHide )
.addClass( isVisible === 'visible' ? ts.css.stickyVis : ts.css.stickyHide )
.css(cssSettings);
if (isVisible !== laststate || event.type === 'resize') {
// make sure the column widths match
resizeHeader();
laststate = isVisible;
}
}); });
c.$table
.unbind('stickyHeadersUpdate' + namespace)
.bind('stickyHeadersUpdate' + namespace, function(){
scrollSticky( true );
});
if (wo.stickyHeaders_addResizeEvent) { if (wo.stickyHeaders_addResizeEvent) {
ts.addHeaderResizeEvent(table); ts.addHeaderResizeEvent(table);
} }
@ -2195,7 +2212,7 @@ ts.addWidget({
var namespace = c.namespace + 'stickyheaders '; var namespace = c.namespace + 'stickyheaders ';
c.$table c.$table
.removeClass('hasStickyHeaders') .removeClass('hasStickyHeaders')
.unbind( ('pagerComplete filterEnd '.split(' ').join(namespace)).replace(/\s+/g, ' ') ) .unbind( ('pagerComplete filterEnd stickyHeadersUpdate '.split(' ').join(namespace)).replace(/\s+/g, ' ') )
.next('.' + ts.css.stickyWrap).remove(); .next('.' + ts.css.stickyWrap).remove();
if (wo.$sticky && wo.$sticky.length) { wo.$sticky.remove(); } // remove cloned table if (wo.$sticky && wo.$sticky.length) { wo.$sticky.remove(); } // remove cloned table
$(window) $(window)
@ -2462,6 +2479,8 @@ ts.resizable = {
ts.resizable.setWidths( c, wo ); ts.resizable.setWidths( c, wo );
} }
vars.mouseXPosition = event.pageX; vars.mouseXPosition = event.pageX;
// dynamically update sticky header widths
c.$table.trigger('stickyHeadersUpdate');
}, },
stopResize : function( c, wo ) { stopResize : function( c, wo ) {
@ -2481,7 +2500,8 @@ ts.resizable = {
} }
vars.mouseXPosition = 0; vars.mouseXPosition = 0;
vars.$target = vars.$next = null; vars.$target = vars.$next = null;
$(window).trigger('resize'); // will update stickyHeaders, just in case // will update stickyHeaders, just in case, see #912
c.$table.trigger('stickyHeadersUpdate');
} }
}; };
@ -2532,7 +2552,7 @@ ts.resizableReset = function( table, refreshing ) {
} }
} }
// reset stickyHeader widths // reset stickyHeader widths
$( window ).trigger( 'resize' ); c.$table.trigger( 'stickyHeadersUpdate' );
if ( ts.storage && !refreshing ) { if ( ts.storage && !refreshing ) {
ts.storage( this, ts.css.resizableStorage, {} ); ts.storage( this, ts.css.resizableStorage, {} );
} }

View File

@ -251,6 +251,8 @@ ts.resizable = {
ts.resizable.setWidths( c, wo ); ts.resizable.setWidths( c, wo );
} }
vars.mouseXPosition = event.pageX; vars.mouseXPosition = event.pageX;
// dynamically update sticky header widths
c.$table.trigger('stickyHeadersUpdate');
}, },
stopResize : function( c, wo ) { stopResize : function( c, wo ) {
@ -270,7 +272,8 @@ ts.resizable = {
} }
vars.mouseXPosition = 0; vars.mouseXPosition = 0;
vars.$target = vars.$next = null; vars.$target = vars.$next = null;
$(window).trigger('resize'); // will update stickyHeaders, just in case // will update stickyHeaders, just in case, see #912
c.$table.trigger('stickyHeadersUpdate');
} }
}; };
@ -321,7 +324,7 @@ ts.resizableReset = function( table, refreshing ) {
} }
} }
// reset stickyHeader widths // reset stickyHeader widths
$( window ).trigger( 'resize' ); c.$table.trigger( 'stickyHeadersUpdate' );
if ( ts.storage && !refreshing ) { if ( ts.storage && !refreshing ) {
ts.storage( this, ts.css.resizableStorage, {} ); ts.storage( this, ts.css.resizableStorage, {} );
} }

View File

@ -16,26 +16,28 @@ $.extend(ts.css, {
// Add a resize event to table headers // Add a resize event to table headers
ts.addHeaderResizeEvent = function(table, disable, settings) { ts.addHeaderResizeEvent = function(table, disable, settings) {
table = $(table)[0]; // make sure we're using a dom element table = $(table)[0]; // make sure we're using a dom element
var headers, if ( !table.config ) { return; }
defaults = { var defaults = {
timer : 250 timer : 250
}, },
options = $.extend({}, defaults, settings), options = $.extend({}, defaults, settings),
c = table.config, c = table.config,
wo = c.widgetOptions, wo = c.widgetOptions,
checkSizes = function( triggerEvent ) { checkSizes = function( triggerEvent ) {
var index, headers, $header, sizes, width, height,
len = c.$headers.length;
wo.resize_flag = true; wo.resize_flag = true;
headers = []; headers = [];
c.$headers.each(function() { for ( index = 0; index < len; index++ ) {
var $header = $(this), $header = c.$headers.eq( index );
sizes = $header.data('savedSizes') || [0,0], // fixes #394 sizes = $header.data( 'savedSizes' ) || [ 0,0 ]; // fixes #394
width = this.offsetWidth, width = $header[0].offsetWidth;
height = this.offsetHeight; height = $header[0].offsetHeight;
if ( width !== sizes[0] || height !== sizes[1] ) { if ( width !== sizes[0] || height !== sizes[1] ) {
$header.data( 'savedSizes', [ width, height ] ); $header.data( 'savedSizes', [ width, height ] );
headers.push(this); headers.push( $header[0] );
}
} }
});
if ( headers.length && triggerEvent !== false ) { if ( headers.length && triggerEvent !== false ) {
c.$table.trigger( 'resize', [ headers ] ); c.$table.trigger( 'resize', [ headers ] );
} }
@ -77,7 +79,8 @@ ts.addWidget({
if ( c.$table.hasClass('hasStickyHeaders') || ($.inArray('filter', c.widgets) >= 0 && !c.$table.hasClass('hasFilters')) ) { if ( c.$table.hasClass('hasStickyHeaders') || ($.inArray('filter', c.widgets) >= 0 && !c.$table.hasClass('hasFilters')) ) {
return; return;
} }
var $table = c.$table, var index, len, $t,
$table = c.$table,
// add position: relative to attach element, hopefully it won't cause trouble. // add position: relative to attach element, hopefully it won't cause trouble.
$attach = $(wo.stickyHeaders_attachTo), $attach = $(wo.stickyHeaders_attachTo),
namespace = c.namespace + 'stickyheaders ', namespace = c.namespace + 'stickyheaders ',
@ -112,10 +115,12 @@ ts.addWidget({
laststate = '', laststate = '',
spacing = 0, spacing = 0,
setWidth = function($orig, $clone){ setWidth = function($orig, $clone){
$orig.filter(':visible').each(function(i) { var index, width, border, $cell, $this,
var width, border, $cells = $orig.filter(':visible'),
$cell = $clone.filter(':visible').eq(i), len = $cells.length;
$this = $(this); for ( index = 0; index < len; index++ ) {
$cell = $clone.filter(':visible').eq(index);
$this = $cells.eq(index);
// code from https://github.com/jmosbech/StickyTableHeaders // code from https://github.com/jmosbech/StickyTableHeaders
if ($this.css('box-sizing') === 'border-box') { if ($this.css('box-sizing') === 'border-box') {
width = $this.outerWidth(); width = $this.outerWidth();
@ -133,10 +138,11 @@ ts.addWidget({
} }
} }
$cell.css({ $cell.css({
'width': width,
'min-width': width, 'min-width': width,
'max-width': width 'max-width': width
}); });
}); }
}, },
resizeHeader = function() { resizeHeader = function() {
stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0; stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0;
@ -148,6 +154,39 @@ ts.addWidget({
}); });
setWidth( $table, $stickyTable ); setWidth( $table, $stickyTable );
setWidth( $header, $stickyCells ); setWidth( $header, $stickyCells );
},
scrollSticky = function( resizing ) {
if (!$table.is(':visible')) { return; } // fixes #278
// Detect nested tables - fixes #724
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
var offset = $table.offset(),
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3
xWindow = $.isWindow( $xScroll[0] ),
// scrollTop = ( $attach.length ? $attach.offset().top : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
scrollTop = ( $attach.length ? ( yWindow ? $yScroll.scrollTop() : $yScroll.offset().top ) : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
tableHeight = $table.height() - ($stickyWrap.height() + ($tfoot.height() || 0)),
isVisible = ( scrollTop > offset.top ) && ( scrollTop < offset.top + tableHeight ) ? 'visible' : 'hidden',
cssSettings = { visibility : isVisible };
if ($attach.length) {
cssSettings.top = yWindow ? scrollTop - $attach.offset().top : $attach.scrollTop();
}
if (xWindow) {
// adjust when scrolling horizontally - fixes issue #143
cssSettings.left = $table.offset().left - parseInt($table.css('margin-left'), 10) - $xScroll.scrollLeft() - spacing;
}
if ($nestedSticky.length) {
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
}
$stickyWrap
.removeClass( ts.css.stickyVis + ' ' + ts.css.stickyHide )
.addClass( isVisible === 'visible' ? ts.css.stickyVis : ts.css.stickyHide )
.css(cssSettings);
if (isVisible !== laststate || resizing) {
// make sure the column widths match
resizeHeader();
laststate = isVisible;
}
}; };
// only add a position relative if a position isn't already defined // only add a position relative if a position isn't already defined
if ($attach.length && !$attach.css('position')) { if ($attach.length && !$attach.css('position')) {
@ -179,48 +218,26 @@ ts.addWidget({
// onRenderHeader is defined, we need to do something about it (fixes #641) // onRenderHeader is defined, we need to do something about it (fixes #641)
if (c.onRenderHeader) { if (c.onRenderHeader) {
$stickyThead.children('tr').children().each(function(index){ $t = $stickyThead.children('tr').children();
len = $t.length;
for ( index = 0; index < len; index++ ) {
// send second parameter // send second parameter
c.onRenderHeader.apply( $(this), [ index, c, $stickyTable ] ); c.onRenderHeader.apply( $t.eq( index ), [ index, c, $stickyTable ] );
}); }
} }
// make it sticky! // make it sticky!
$xScroll.add($yScroll) $xScroll.add($yScroll)
.unbind( ('scroll resize '.split(' ').join( namespace )).replace(/\s+/g, ' ') ) .unbind( ('scroll resize '.split(' ').join( namespace )).replace(/\s+/g, ' ') )
.bind('scroll resize '.split(' ').join( namespace ), function( event ) { .bind('scroll resize '.split(' ').join( namespace ), function( event ) {
if (!$table.is(':visible')) { return; } // fixes #278 scrollSticky( event.type === 'resize' );
// Detect nested tables - fixes #724
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
var offset = $table.offset(),
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3
xWindow = $.isWindow( $xScroll[0] ),
// scrollTop = ( $attach.length ? $attach.offset().top : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
scrollTop = ( $attach.length ? ( yWindow ? $yScroll.scrollTop() : $yScroll.offset().top ) : $yScroll.scrollTop() ) + stickyOffset + nestedStickyTop,
tableHeight = $table.height() - ($stickyWrap.height() + ($tfoot.height() || 0)),
isVisible = ( scrollTop > offset.top ) && ( scrollTop < offset.top + tableHeight ) ? 'visible' : 'hidden',
cssSettings = { visibility : isVisible };
if ($attach.length) {
cssSettings.top = yWindow ? scrollTop - $attach.offset().top : $attach.scrollTop();
}
if (xWindow) {
// adjust when scrolling horizontally - fixes issue #143
cssSettings.left = $table.offset().left - parseInt($table.css('margin-left'), 10) - $xScroll.scrollLeft() - spacing;
}
if ($nestedSticky.length) {
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
}
$stickyWrap
.removeClass( ts.css.stickyVis + ' ' + ts.css.stickyHide )
.addClass( isVisible === 'visible' ? ts.css.stickyVis : ts.css.stickyHide )
.css(cssSettings);
if (isVisible !== laststate || event.type === 'resize') {
// make sure the column widths match
resizeHeader();
laststate = isVisible;
}
}); });
c.$table
.unbind('stickyHeadersUpdate' + namespace)
.bind('stickyHeadersUpdate' + namespace, function(){
scrollSticky( true );
});
if (wo.stickyHeaders_addResizeEvent) { if (wo.stickyHeaders_addResizeEvent) {
ts.addHeaderResizeEvent(table); ts.addHeaderResizeEvent(table);
} }
@ -256,7 +273,7 @@ ts.addWidget({
var namespace = c.namespace + 'stickyheaders '; var namespace = c.namespace + 'stickyheaders ';
c.$table c.$table
.removeClass('hasStickyHeaders') .removeClass('hasStickyHeaders')
.unbind( ('pagerComplete filterEnd '.split(' ').join(namespace)).replace(/\s+/g, ' ') ) .unbind( ('pagerComplete filterEnd stickyHeadersUpdate '.split(' ').join(namespace)).replace(/\s+/g, ' ') )
.next('.' + ts.css.stickyWrap).remove(); .next('.' + ts.css.stickyWrap).remove();
if (wo.$sticky && wo.$sticky.length) { wo.$sticky.remove(); } // remove cloned table if (wo.$sticky && wo.$sticky.length) { wo.$sticky.remove(); } // remove cloned table
$(window) $(window)