mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
Scroller: properly adjust column widths. Fixes #836
This commit is contained in:
Mottie
parent
7149b97ef7
commit
1dad33db49
@ -87,6 +87,7 @@ $(function() {
|
||||
<li>Older versions of this widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
|
||||
<li>The original "widgetColumns" option has been replaced by "widgetOptions.columns". See the javascript block below for more details (v2.1).</li>
|
||||
<li>Table header and footer rows now get updated with the columns widget classes. Check out the "grey" theme to see (v2.4).</li>
|
||||
<li>This demo page is running jQuery v1.2.6.</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
|
||||
@ -33,14 +33,6 @@
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/widgets/widget-scroller.js"></script>
|
||||
|
||||
<style id="css">.name { width: 20%; }
|
||||
.major { width: 35%; }
|
||||
.sex { width: 16%; }
|
||||
.english{ width: 8%; }
|
||||
.japanese { width: 8%; }
|
||||
.calculus { width: 8%; }
|
||||
.geometry { width: 100px; }</style>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$('.tablesorter').tablesorter({
|
||||
@ -51,7 +43,9 @@
|
||||
widgets: [ 'uitheme', 'zebra', 'filter', 'scroller' ],
|
||||
widgetOptions : {
|
||||
scroller_height : 300,
|
||||
// scroll tbody to top after sorting
|
||||
scroller_upAfterSort: true,
|
||||
// pop table header into view while scrolling up the page
|
||||
scroller_jumpToHeader: true,
|
||||
// In tablesorter v2.19.0 the scroll bar width is auto-detected
|
||||
// add a value here to override the auto-detected setting
|
||||
@ -74,8 +68,9 @@ $(function() {
|
||||
|
||||
$('link.theme').each(function(){ this.disabled = true; });
|
||||
|
||||
var b = true, $tbl,
|
||||
$c = $('#case'),
|
||||
var $tbl,
|
||||
$jth = $('#jth'),
|
||||
$uas = $('#uas'),
|
||||
themes = 'default blue green grey ice black-ice dark dropbox metro-dark',
|
||||
i, o = '', t = themes.split(' ');
|
||||
for (i = 0; i < t.length; i++) {
|
||||
@ -110,10 +105,18 @@ $(function() {
|
||||
|
||||
$tbl = $('.tablesorter-scroller-table table');
|
||||
$('button').click(function(){
|
||||
b = !b;
|
||||
var jth = $jth.text() === 'true',
|
||||
uas = $uas.text() === 'true';
|
||||
if (this.id === 'jthb') {
|
||||
jth = !jth;
|
||||
} else {
|
||||
uas = !uas;
|
||||
}
|
||||
$tbl.each(function(){
|
||||
this.config.widgetOptions.scroller_jumpToHeader = b;
|
||||
$c.html(b + '');
|
||||
this.config.widgetOptions.scroller_jumpToHeader = jth;
|
||||
this.config.widgetOptions.scroller_upAfterSort = uas;
|
||||
$jth.html(jth + '');
|
||||
$uas.html(uas + '');
|
||||
});
|
||||
return false;
|
||||
});
|
||||
@ -134,11 +137,12 @@ $(function() {
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.21.1</span>, columns now line up, especially while scrolling horizontally. It may not be pixel perfect, but it looks pretty good if table css "box-sizing" is set to "border-box".</li>
|
||||
<li>In <span class="version">v2.21.0</span>
|
||||
<ul>
|
||||
<li>This widget was updated to include the <code>tfoot</code> rows.</li>
|
||||
@ -173,7 +177,7 @@ $(function() {
|
||||
</div>
|
||||
<table class="options tablesorter-jui" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
||||
<tr><th>Option</th><th class="defaults">Default</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@ -203,6 +207,7 @@ $(function() {
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
This option was been completely removed in <span class="version alert">v2.18.0</span> as the id is now obtained from the unique namespace.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -215,6 +220,7 @@ $(function() {
|
||||
When <code>true</code>, the scroller automatically scrolls the inner window back to the top after sorting.<br>
|
||||
<br>
|
||||
Set this option to <code>false</code> to prevent this behaviour, or to stop the window from scrolling after interacting with a table cell (e.g. clicking on a checkbox); new in <span class="version">v2.17.3</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -227,6 +233,7 @@ $(function() {
|
||||
When <code>true</code>, this option makes the table header jump into view when the table body is not scolled to the top and while scrolling up the page. It's not perfect, but it works. Disable it as desired.<br>
|
||||
<br>
|
||||
<span class="remark">*</span> <em>To see the difference, toggle the button in the demo below, then scroll down & up the page using a mouse wheel with the cursor at the horizontal center of the page and about 100 pixels from the top, so the cursor is within the table body.</em>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -246,7 +253,9 @@ $(function() {
|
||||
<option value="jui">Jquery UI</option>
|
||||
</select><br>
|
||||
<br>
|
||||
<button type="button">Toggle</button> scroller_jumpToHeader : <span id="case">true</span> (see the note above)<span class="remark">*</span>
|
||||
<button id="jthb" type="button">Toggle</button> scroller_jumpToHeader : <span id="jth">true</span> (see the note above)<span class="remark">*</span>
|
||||
<br>
|
||||
<button type="button">Toggle</button> scroller_upAfterSort : <span id="uas">true</span>
|
||||
<p></p>
|
||||
|
||||
<table class="tablesorter">
|
||||
|
||||
@ -149,7 +149,7 @@
|
||||
t.find('.collapsible').show();
|
||||
if (t.closest('table').hasClass('hasStickyHeaders')) {
|
||||
setTimeout(function(){
|
||||
window.scrollTo( 0, t.offset().top - 27 );
|
||||
window.scrollTo( 0, t.offset().top - t.parents('table')[0].config.widgetOptions.$sticky.outerHeight() );
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
@ -165,7 +165,8 @@
|
||||
});
|
||||
|
||||
function showProperty(){
|
||||
var prop, $t, wo, h = window.location.hash;
|
||||
var prop, $t, wo, stickyHt,
|
||||
h = window.location.hash;
|
||||
if (h) {
|
||||
prop = $(h);
|
||||
if (prop.length && !/h3|a|table/i.test(prop[0].tagName)) {
|
||||
@ -178,7 +179,8 @@
|
||||
$t = prop.closest('table');
|
||||
if ($t.length && $t[0].config) {
|
||||
wo = $t[0].config.widgetOptions;
|
||||
h = ( wo.$sticky ? wo.$sticky.height() : '' ) || $t.hasClass('hasStickHeaders') ? 27 : 0;
|
||||
stickyHt = $t[0].config.widgetOptions.$sticky.outerHeight();
|
||||
h = ( wo.$sticky ? wo.$sticky.height() : '' ) || $t.hasClass('hasStickHeaders') ? stickyHt : 0;
|
||||
if ($t.hasClass('options') || $t.hasClass('api')) {
|
||||
window.scrollTo( 0, prop.offset().top - h );
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@ $(function(){
|
||||
'.tablesorter-scrollbar-measure { width: 100px; height: 100px; overflow: scroll; position: absolute; top: -9999px; } ' +
|
||||
'.tablesorter-scroller-reset { width: auto !important; } ' +
|
||||
'.tablesorter-scroller { text-align: left; overflow: hidden; }' +
|
||||
'.tablesorter-scroller-header { overflow: hidden; }' +
|
||||
'.tablesorter-scroller-header, .tablesorter-scroller-footer { overflow: hidden; }' +
|
||||
'.tablesorter-scroller-header table.tablesorter { margin-bottom: 0; }' +
|
||||
'.tablesorter-scroller-footer table.tablesorter thead { visibility: hidden, height: 0; overflow: hidden; }' +
|
||||
'.tablesorter-scroller-table { overflow-y: scroll; }' +
|
||||
@ -96,8 +96,8 @@ ts.addWidget({
|
||||
});
|
||||
},
|
||||
format: function(table, c, wo) {
|
||||
var maxHt, tbHt, $hdr, $t, resize, getBarWidth, $hCells, $fCells,
|
||||
$ft = [],
|
||||
var maxHt, tbHt, $hdr, $t, resize, getBarWidth, $hCells, $fCells, $tblWrap,
|
||||
$ft = $(),
|
||||
// c.namespace contains a unique tablesorter ID, per table
|
||||
id = c.namespace.slice(1) + 'tsscroller',
|
||||
$win = $(window),
|
||||
@ -145,6 +145,7 @@ ts.addWidget({
|
||||
|
||||
// use max-height, so the height resizes dynamically while filtering
|
||||
$tbl.wrap('<div class="tablesorter-scroller-table" style="max-height:' + maxHt + 'px;" />');
|
||||
$tblWrap = $tbl.parent();
|
||||
|
||||
// make scroller header sortable
|
||||
ts.bindEvents(table, $hCells);
|
||||
@ -164,7 +165,7 @@ ts.addWidget({
|
||||
};
|
||||
|
||||
resize = function(){
|
||||
var d, b, $h, w,
|
||||
var b, $h, $f, w,
|
||||
// Hide other scrollers so we can resize
|
||||
$div = $('div.tablesorter-scroller[id != "' + id + '"]').hide();
|
||||
|
||||
@ -180,19 +181,48 @@ ts.addWidget({
|
||||
.children('thead')
|
||||
.find('.tablesorter-header-inner').addClass('tablesorter-scroller-reset').end()
|
||||
.find('.tablesorter-filter-row').show();
|
||||
d = $tbl.parent();
|
||||
d.addClass('tablesorter-scroller-reset');
|
||||
$tblWrap.addClass('tablesorter-scroller-reset');
|
||||
|
||||
d.parent().trigger('resize');
|
||||
$tblWrap.parent().trigger('resize');
|
||||
|
||||
// include left & right border widths
|
||||
b = parseInt( $tbl.css('border-left-width'), 10 ) + parseInt( $tbl.css('border-right-width'), 10 );
|
||||
|
||||
// Shrink a bit to accommodate scrollbar
|
||||
w = ( wo.scroller_barWidth || getBarWidth() ) + b;
|
||||
d.width( d.parent().innerWidth() - ( d.parent().hasScrollBar() ? w : 0 ) );
|
||||
w = d.innerWidth() - ( d.hasScrollBar() ? w : 0 );
|
||||
$tbl.add( $hdr ).add( $hdr.parent() ).add( $ft ).width( w );
|
||||
|
||||
$tblWrap.width( $tblWrap.parent().innerWidth() - ( $tblWrap.parent().hasScrollBar() ? w : 0 ) );
|
||||
w = $tblWrap.innerWidth() - ( $tblWrap.hasScrollBar() ? w : 0 );
|
||||
$hdr.parent().add( $ft.parent() ).width( w );
|
||||
|
||||
w = $tbl.width();
|
||||
|
||||
$h = $hdr.children('thead').children().children('th, td').filter(':visible');
|
||||
$f = $ft.children('tfoot').children().children('th, td').filter(':visible');
|
||||
$tbl.children('thead').children().eq(0).children('th, td').each(function(indx, el) {
|
||||
var width, border,
|
||||
$this = $(this);
|
||||
// code from https://github.com/jmosbech/StickyTableHeaders
|
||||
if ($this.css('box-sizing') === 'border-box') {
|
||||
width = $this.outerWidth();
|
||||
} else {
|
||||
if ($h.eq(indx).css('border-collapse') === 'collapse') {
|
||||
if (window.getComputedStyle) {
|
||||
width = parseFloat( window.getComputedStyle(this, null).width );
|
||||
} else {
|
||||
// ie8 only
|
||||
border = parseFloat( $this.css('border-width') );
|
||||
width = $this.outerWidth() - parseFloat( $this.css('padding-left') ) - parseFloat( $this.css('padding-right') ) - border;
|
||||
}
|
||||
} else {
|
||||
width = $this.width();
|
||||
}
|
||||
}
|
||||
$h.eq(indx).add( $f.eq(indx) ).css({
|
||||
'min-width': width,
|
||||
'max-width': width
|
||||
});
|
||||
});
|
||||
|
||||
$tbl
|
||||
.closest('.tablesorter-scroller')
|
||||
@ -224,17 +254,17 @@ ts.addWidget({
|
||||
$tbl.find('thead').css('visibility', 'hidden');
|
||||
c.isScrolling = true;
|
||||
|
||||
tbHt = $tbl.parent().parent().height();
|
||||
tbHt = $tblWrap.parent().height();
|
||||
|
||||
// The header will always jump into view if scrolling the table body
|
||||
$tbl.parent().bind('scroll', function(){
|
||||
$tblWrap.bind('scroll', function(){
|
||||
if (wo.scroller_jumpToHeader) {
|
||||
var pos = $win.scrollTop() - $hdr.offset().top;
|
||||
if ($(this).scrollTop() !== 0 && pos < tbHt && pos > 0) {
|
||||
$win.scrollTop( $hdr.offset().top );
|
||||
}
|
||||
}
|
||||
$hdr.parent().scrollLeft( $(this).scrollLeft() );
|
||||
$hdr.parent().add( $ft.parent() ).scrollLeft( $(this).scrollLeft() );
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user