library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2025-01-12 15:24:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
dist/js/jquery.tablesorter.combined.js vendored
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,32 +4124,34 @@ $.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 ] );
} }
wo.resize_flag = false; wo.resize_flag = false;
}; };
checkSizes(false); checkSizes( false );
clearInterval(wo.resize_timer); clearInterval(wo.resize_timer);
if (disable) { if (disable) {
wo.resize_flag = false; wo.resize_flag = false;
@ -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; c.$table
var offset = $table.offset(), .unbind('stickyHeadersUpdate' + namespace)
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3 .bind('stickyHeadersUpdate' + namespace, function(){
xWindow = $.isWindow( $xScroll[0] ), scrollSticky( true );
// 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;
}
});
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, {} );
} }

8
dist/js/jquery.tablesorter.combined.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
dist/js/jquery.tablesorter.js vendored
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;

4
dist/js/jquery.tablesorter.min.js vendored
View File

File diff suppressed because one or more lines are too long

142
dist/js/jquery.tablesorter.widgets.js vendored
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,32 +1949,34 @@ $.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 ] );
} }
wo.resize_flag = false; wo.resize_flag = false;
}; };
checkSizes(false); checkSizes( false );
clearInterval(wo.resize_timer); clearInterval(wo.resize_timer);
if (disable) { if (disable) {
wo.resize_flag = false; wo.resize_flag = false;
@ -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; c.$table
var offset = $table.offset(), .unbind('stickyHeadersUpdate' + namespace)
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3 .bind('stickyHeadersUpdate' + namespace, function(){
xWindow = $.isWindow( $xScroll[0] ), scrollSticky( true );
// 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;
}
});
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, {} );
} }

6
dist/js/jquery.tablesorter.widgets.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/widgets/widget-resizable.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/widgets/widget-stickyHeaders.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
docs/example-widget-sticky-header.html
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">

147
js/jquery.tablesorter.combined.js
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,32 +4130,34 @@ $.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 ] );
} }
wo.resize_flag = false; wo.resize_flag = false;
}; };
checkSizes(false); checkSizes( false );
clearInterval(wo.resize_timer); clearInterval(wo.resize_timer);
if (disable) { if (disable) {
wo.resize_flag = false; wo.resize_flag = false;
@ -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; c.$table
var offset = $table.offset(), .unbind('stickyHeadersUpdate' + namespace)
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3 .bind('stickyHeadersUpdate' + namespace, function(){
xWindow = $.isWindow( $xScroll[0] ), scrollSticky( true );
// 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;
}
});
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, {} );
} }

5
js/jquery.tablesorter.js
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;

142
js/jquery.tablesorter.widgets.js
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,32 +1955,34 @@ $.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 ] );
} }
wo.resize_flag = false; wo.resize_flag = false;
}; };
checkSizes(false); checkSizes( false );
clearInterval(wo.resize_timer); clearInterval(wo.resize_timer);
if (disable) { if (disable) {
wo.resize_flag = false; wo.resize_flag = false;
@ -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; c.$table
var offset = $table.offset(), .unbind('stickyHeadersUpdate' + namespace)
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3 .bind('stickyHeadersUpdate' + namespace, function(){
xWindow = $.isWindow( $xScroll[0] ), scrollSticky( true );
// 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;
}
});
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, {} );
} }

7
js/widgets/widget-resizable.js
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, {} );
} }

133
js/widgets/widget-stickyHeaders.js
View File

@ -16,32 +16,34 @@ $.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 ] );
} }
wo.resize_flag = false; wo.resize_flag = false;
}; };
checkSizes(false); checkSizes( false );
clearInterval(wo.resize_timer); clearInterval(wo.resize_timer);
if (disable) { if (disable) {
wo.resize_flag = false; wo.resize_flag = false;
@ -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; c.$table
var offset = $table.offset(), .unbind('stickyHeadersUpdate' + namespace)
yWindow = $.isWindow( $yScroll[0] ), // $.isWindow needs jQuery 1.4.3 .bind('stickyHeadersUpdate' + namespace, function(){
xWindow = $.isWindow( $xScroll[0] ), scrollSticky( true );
// 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;
}
});
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)