library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

StickyHeaders: add sticky header hidden class & modal demo links. Closes #832

Browse Source 
position relative is only added if no position attribute is set
This commit is contained in:
Mottie 2015-02-26 17:51:45 -06:00
parent d3170096b2
commit c93ee7ceef
6 changed files with 68 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
dist/js/jquery.tablesorter.widgets.js vendored
View File

@ -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,7 +1754,9 @@ ts.addWidget({
$stickyTable = wo.$sticky = $table.clone()
.addClass('containsStickyHeaders ' + ts.css.sticky + ' ' + wo.stickyHeaders)
.wrap('<div class="' + ts.css.stickyWrap + '">'),
$stickyWrap = $stickyTable.parent().css({
$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,
@ -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
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

8
docs/example-widget-sticky-header.html
View File

@ -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 -->

21
js/jquery.tablesorter.widgets.js
View File

@ -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,7 +1760,9 @@ ts.addWidget({
$stickyTable = wo.$sticky = $table.clone()
.addClass('containsStickyHeaders ' + ts.css.sticky + ' ' + wo.stickyHeaders)
.wrap('<div class="' + ts.css.stickyWrap + '">'),
$stickyWrap = $stickyTable.parent().css({
$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,
@ -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

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

@ -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,7 +94,9 @@ ts.addWidget({
$stickyTable = wo.$sticky = $table.clone()
.addClass('containsStickyHeaders ' + ts.css.sticky + ' ' + wo.stickyHeaders)
.wrap('<div class="' + ts.css.stickyWrap + '">'),
$stickyWrap = $stickyTable.parent().css({
$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,
@ -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