mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
StickyHeaders: add sticky header hidden class & modal demo links. Closes #832
position relative is only added if no position attribute is set
This commit is contained in:
Mottie
parent
d3170096b2
commit
c93ee7ceef
35
dist/js/jquery.tablesorter.widgets.js
vendored
35
dist/js/jquery.tablesorter.widgets.js
vendored
@ -1666,6 +1666,7 @@ var ts = $.tablesorter = $.tablesorter || {};
|
||||
$.extend(ts.css, {
|
||||
sticky : 'tablesorter-stickyHeader', // stickyHeader
|
||||
stickyVis : 'tablesorter-sticky-visible',
|
||||
stickyHide: 'tablesorter-sticky-hidden',
|
||||
stickyWrap: 'tablesorter-sticky-wrapper'
|
||||
});
|
||||
|
||||
@ -1735,7 +1736,7 @@ ts.addWidget({
|
||||
}
|
||||
var $table = c.$table,
|
||||
// add position: relative to attach element, hopefully it won't cause trouble.
|
||||
$attach = $(wo.stickyHeaders_attachTo).css('position', 'relative'),
|
||||
$attach = $(wo.stickyHeaders_attachTo),
|
||||
namespace = c.namespace + 'stickyheaders ',
|
||||
// element to watch for the scroll event
|
||||
$yScroll = $(wo.stickyHeaders_yScroll || wo.stickyHeaders_attachTo || window),
|
||||
@ -1744,8 +1745,7 @@ ts.addWidget({
|
||||
$header = $thead.children('tr').not('.sticky-false').children(),
|
||||
$tfoot = $table.children('tfoot'),
|
||||
$stickyOffset = isNaN(wo.stickyHeaders_offset) ? $(wo.stickyHeaders_offset) : '',
|
||||
stickyOffset = $attach.length ? 0 : $stickyOffset.length ?
|
||||
$stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0,
|
||||
stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0,
|
||||
// is this table nested? If so, find parent sticky header wrapper (div, not table)
|
||||
$nestedSticky = $table.parent().closest('.' + ts.css.table).hasClass('hasStickyHeaders') ?
|
||||
$table.parent().closest('table.tablesorter')[0].config.widgetOptions.$sticky.parent() : [],
|
||||
@ -1754,14 +1754,16 @@ ts.addWidget({
|
||||
$stickyTable = wo.$sticky = $table.clone()
|
||||
.addClass('containsStickyHeaders ' + ts.css.sticky + ' ' + wo.stickyHeaders)
|
||||
.wrap('<div class="' + ts.css.stickyWrap + '">'),
|
||||
$stickyWrap = $stickyTable.parent().css({
|
||||
position : $attach.length ? 'absolute' : 'fixed',
|
||||
padding : parseInt( $stickyTable.parent().parent().css('padding-left'), 10 ),
|
||||
top : stickyOffset + nestedStickyTop,
|
||||
left : 0,
|
||||
visibility : 'hidden',
|
||||
zIndex : wo.stickyHeaders_zIndex || 2
|
||||
}),
|
||||
$stickyWrap = $stickyTable.parent()
|
||||
.addClass(ts.css.stickyHide)
|
||||
.css({
|
||||
position : $attach.length ? 'absolute' : 'fixed',
|
||||
padding : parseInt( $stickyTable.parent().parent().css('padding-left'), 10 ),
|
||||
top : stickyOffset + nestedStickyTop,
|
||||
left : 0,
|
||||
visibility : 'hidden',
|
||||
zIndex : wo.stickyHeaders_zIndex || 2
|
||||
}),
|
||||
$stickyThead = $stickyTable.children('thead:first'),
|
||||
$stickyCells,
|
||||
laststate = '',
|
||||
@ -1804,6 +1806,10 @@ ts.addWidget({
|
||||
setWidth( $table, $stickyTable );
|
||||
setWidth( $header, $stickyCells );
|
||||
};
|
||||
// only add a position relative if a position isn't already defined
|
||||
if ($attach.length && !$attach.css('position')) {
|
||||
$attach.css('position', 'relative');
|
||||
}
|
||||
// save stickyTable element to config
|
||||
// it is also saved to wo.$sticky
|
||||
if (c.$extraTables && c.$extraTables.length) {
|
||||
@ -1850,8 +1856,7 @@ ts.addWidget({
|
||||
if (!$table.is(':visible')) { return; } // fixes #278
|
||||
// Detect nested tables - fixes #724
|
||||
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
|
||||
var prefix = 'tablesorter-sticky-',
|
||||
offset = $table.offset(),
|
||||
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,
|
||||
@ -1871,8 +1876,8 @@ ts.addWidget({
|
||||
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
|
||||
}
|
||||
$stickyWrap
|
||||
.removeClass(prefix + 'visible ' + prefix + 'hidden')
|
||||
.addClass(prefix + isVisible)
|
||||
.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
|
||||
|
||||
4
dist/js/jquery.tablesorter.widgets.min.js
vendored
4
dist/js/jquery.tablesorter.widgets.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/widgets/widget-stickyHeaders.min.js
vendored
2
dist/js/widgets/widget-stickyHeaders.min.js
vendored
File diff suppressed because one or more lines are too long
@ -410,7 +410,11 @@ $(function() {
|
||||
<p></p>
|
||||
|
||||
<h3>Sticky headers in a popup window</h3>
|
||||
<a href="#popup" class="open-popup-link">Show table in Magnific popup window</a>
|
||||
<ul>
|
||||
<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 href="http://jsfiddle.net/Mottie/Leyaxm70/">Show table in Bootstrap Modal</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="popup" class="white-popup mfp-hide">
|
||||
<table id="table0" class="tablesorter">
|
||||
@ -477,8 +481,6 @@ $(function() {
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<h3>Attach sticky header to browser window</h3>
|
||||
<table id="table1" class="tablesorter">
|
||||
<caption class="dark-row">Student Grades</caption> <!-- dark-row used by metro-dark theme to make the header row darker -->
|
||||
|
||||
@ -1672,6 +1672,7 @@ var ts = $.tablesorter = $.tablesorter || {};
|
||||
$.extend(ts.css, {
|
||||
sticky : 'tablesorter-stickyHeader', // stickyHeader
|
||||
stickyVis : 'tablesorter-sticky-visible',
|
||||
stickyHide: 'tablesorter-sticky-hidden',
|
||||
stickyWrap: 'tablesorter-sticky-wrapper'
|
||||
});
|
||||
|
||||
@ -1741,7 +1742,7 @@ ts.addWidget({
|
||||
}
|
||||
var $table = c.$table,
|
||||
// add position: relative to attach element, hopefully it won't cause trouble.
|
||||
$attach = $(wo.stickyHeaders_attachTo).css('position', 'relative'),
|
||||
$attach = $(wo.stickyHeaders_attachTo),
|
||||
namespace = c.namespace + 'stickyheaders ',
|
||||
// element to watch for the scroll event
|
||||
$yScroll = $(wo.stickyHeaders_yScroll || wo.stickyHeaders_attachTo || window),
|
||||
@ -1750,8 +1751,7 @@ ts.addWidget({
|
||||
$header = $thead.children('tr').not('.sticky-false').children(),
|
||||
$tfoot = $table.children('tfoot'),
|
||||
$stickyOffset = isNaN(wo.stickyHeaders_offset) ? $(wo.stickyHeaders_offset) : '',
|
||||
stickyOffset = $attach.length ? 0 : $stickyOffset.length ?
|
||||
$stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0,
|
||||
stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0,
|
||||
// is this table nested? If so, find parent sticky header wrapper (div, not table)
|
||||
$nestedSticky = $table.parent().closest('.' + ts.css.table).hasClass('hasStickyHeaders') ?
|
||||
$table.parent().closest('table.tablesorter')[0].config.widgetOptions.$sticky.parent() : [],
|
||||
@ -1760,14 +1760,16 @@ ts.addWidget({
|
||||
$stickyTable = wo.$sticky = $table.clone()
|
||||
.addClass('containsStickyHeaders ' + ts.css.sticky + ' ' + wo.stickyHeaders)
|
||||
.wrap('<div class="' + ts.css.stickyWrap + '">'),
|
||||
$stickyWrap = $stickyTable.parent().css({
|
||||
position : $attach.length ? 'absolute' : 'fixed',
|
||||
padding : parseInt( $stickyTable.parent().parent().css('padding-left'), 10 ),
|
||||
top : stickyOffset + nestedStickyTop,
|
||||
left : 0,
|
||||
visibility : 'hidden',
|
||||
zIndex : wo.stickyHeaders_zIndex || 2
|
||||
}),
|
||||
$stickyWrap = $stickyTable.parent()
|
||||
.addClass(ts.css.stickyHide)
|
||||
.css({
|
||||
position : $attach.length ? 'absolute' : 'fixed',
|
||||
padding : parseInt( $stickyTable.parent().parent().css('padding-left'), 10 ),
|
||||
top : stickyOffset + nestedStickyTop,
|
||||
left : 0,
|
||||
visibility : 'hidden',
|
||||
zIndex : wo.stickyHeaders_zIndex || 2
|
||||
}),
|
||||
$stickyThead = $stickyTable.children('thead:first'),
|
||||
$stickyCells,
|
||||
laststate = '',
|
||||
@ -1810,6 +1812,10 @@ ts.addWidget({
|
||||
setWidth( $table, $stickyTable );
|
||||
setWidth( $header, $stickyCells );
|
||||
};
|
||||
// only add a position relative if a position isn't already defined
|
||||
if ($attach.length && !$attach.css('position')) {
|
||||
$attach.css('position', 'relative');
|
||||
}
|
||||
// save stickyTable element to config
|
||||
// it is also saved to wo.$sticky
|
||||
if (c.$extraTables && c.$extraTables.length) {
|
||||
@ -1856,8 +1862,7 @@ ts.addWidget({
|
||||
if (!$table.is(':visible')) { return; } // fixes #278
|
||||
// Detect nested tables - fixes #724
|
||||
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
|
||||
var prefix = 'tablesorter-sticky-',
|
||||
offset = $table.offset(),
|
||||
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,
|
||||
@ -1877,8 +1882,8 @@ ts.addWidget({
|
||||
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
|
||||
}
|
||||
$stickyWrap
|
||||
.removeClass(prefix + 'visible ' + prefix + 'hidden')
|
||||
.addClass(prefix + isVisible)
|
||||
.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
|
||||
|
||||
@ -6,6 +6,7 @@ var ts = $.tablesorter = $.tablesorter || {};
|
||||
$.extend(ts.css, {
|
||||
sticky : 'tablesorter-stickyHeader', // stickyHeader
|
||||
stickyVis : 'tablesorter-sticky-visible',
|
||||
stickyHide: 'tablesorter-sticky-hidden',
|
||||
stickyWrap: 'tablesorter-sticky-wrapper'
|
||||
});
|
||||
|
||||
@ -75,7 +76,7 @@ ts.addWidget({
|
||||
}
|
||||
var $table = c.$table,
|
||||
// add position: relative to attach element, hopefully it won't cause trouble.
|
||||
$attach = $(wo.stickyHeaders_attachTo).css('position', 'relative'),
|
||||
$attach = $(wo.stickyHeaders_attachTo),
|
||||
namespace = c.namespace + 'stickyheaders ',
|
||||
// element to watch for the scroll event
|
||||
$yScroll = $(wo.stickyHeaders_yScroll || wo.stickyHeaders_attachTo || window),
|
||||
@ -84,8 +85,7 @@ ts.addWidget({
|
||||
$header = $thead.children('tr').not('.sticky-false').children(),
|
||||
$tfoot = $table.children('tfoot'),
|
||||
$stickyOffset = isNaN(wo.stickyHeaders_offset) ? $(wo.stickyHeaders_offset) : '',
|
||||
stickyOffset = $attach.length ? 0 : $stickyOffset.length ?
|
||||
$stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0,
|
||||
stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0,
|
||||
// is this table nested? If so, find parent sticky header wrapper (div, not table)
|
||||
$nestedSticky = $table.parent().closest('.' + ts.css.table).hasClass('hasStickyHeaders') ?
|
||||
$table.parent().closest('table.tablesorter')[0].config.widgetOptions.$sticky.parent() : [],
|
||||
@ -94,14 +94,16 @@ ts.addWidget({
|
||||
$stickyTable = wo.$sticky = $table.clone()
|
||||
.addClass('containsStickyHeaders ' + ts.css.sticky + ' ' + wo.stickyHeaders)
|
||||
.wrap('<div class="' + ts.css.stickyWrap + '">'),
|
||||
$stickyWrap = $stickyTable.parent().css({
|
||||
position : $attach.length ? 'absolute' : 'fixed',
|
||||
padding : parseInt( $stickyTable.parent().parent().css('padding-left'), 10 ),
|
||||
top : stickyOffset + nestedStickyTop,
|
||||
left : 0,
|
||||
visibility : 'hidden',
|
||||
zIndex : wo.stickyHeaders_zIndex || 2
|
||||
}),
|
||||
$stickyWrap = $stickyTable.parent()
|
||||
.addClass(ts.css.stickyHide)
|
||||
.css({
|
||||
position : $attach.length ? 'absolute' : 'fixed',
|
||||
padding : parseInt( $stickyTable.parent().parent().css('padding-left'), 10 ),
|
||||
top : stickyOffset + nestedStickyTop,
|
||||
left : 0,
|
||||
visibility : 'hidden',
|
||||
zIndex : wo.stickyHeaders_zIndex || 2
|
||||
}),
|
||||
$stickyThead = $stickyTable.children('thead:first'),
|
||||
$stickyCells,
|
||||
laststate = '',
|
||||
@ -144,6 +146,10 @@ ts.addWidget({
|
||||
setWidth( $table, $stickyTable );
|
||||
setWidth( $header, $stickyCells );
|
||||
};
|
||||
// only add a position relative if a position isn't already defined
|
||||
if ($attach.length && !$attach.css('position')) {
|
||||
$attach.css('position', 'relative');
|
||||
}
|
||||
// save stickyTable element to config
|
||||
// it is also saved to wo.$sticky
|
||||
if (c.$extraTables && c.$extraTables.length) {
|
||||
@ -190,8 +196,7 @@ ts.addWidget({
|
||||
if (!$table.is(':visible')) { return; } // fixes #278
|
||||
// Detect nested tables - fixes #724
|
||||
nestedStickyTop = $nestedSticky.length ? $nestedSticky.offset().top - $yScroll.scrollTop() + $nestedSticky.height() : 0;
|
||||
var prefix = 'tablesorter-sticky-',
|
||||
offset = $table.offset(),
|
||||
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,
|
||||
@ -211,8 +216,8 @@ ts.addWidget({
|
||||
cssSettings.top = ( cssSettings.top || 0 ) + stickyOffset + nestedStickyTop;
|
||||
}
|
||||
$stickyWrap
|
||||
.removeClass(prefix + 'visible ' + prefix + 'hidden')
|
||||
.addClass(prefix + isVisible)
|
||||
.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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user