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

Scroller: behaves properly with overflow scroll & column alignment. Fixes #340 & #333

Browse Source
This commit is contained in:
Mottie 2014-06-18 14:37:24 -05:00
parent ba7a0de1b8
commit 46f2561f32
3 changed files with 69 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/example-widget-scroller.html
View File

@ -30,6 +30,14 @@
<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(){
$("table").tablesorter({
@ -104,6 +112,13 @@ $(function() {
<p class="tip">
<em>NOTE!</em>
<ul>
<li>In <span class="version">v2.17.2</span>
<ul>
<li>The scroller widget will now work properly with predefined column widths.</li>
<li>Shrinking the browser window will now hide the header overflow.</li>
<li>Horizontal scrolling of the table body will now properly horizontally scroll the header.</li>
</ul>
</li>
<li>This widget can not be applied to the original plugin and requires jQuery version 1.4+ to function properly; if you need to make it work with older versions of jQuery and the plugin, please use <a href="http://tconnell.com/samples/scroller/">this version</a> of the widget.</li>
<li>This widget was originally written by <a href="http://tconnell.com/samples/scroller/">Connell & Associates, Inc.</a> and is dual-licensed under the MIT and GPL licenses. It has been modified to work with tablesorter version 2.9+.</li>
<li>Scroller widget options include:
@ -134,7 +149,14 @@ $(function() {
<table class="tablesorter">
<thead>
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
<tr>
<th class="name">Name</th>
<th class="major">Major</th><th>Sex</th>
<th class="english">English</th>
<th class="japanese">Japanese</th>
<th class="calculus">Calculus</th>
<th class="geometry filter-false sorter-false">Geometry</th>
</tr>
</thead>
<tfoot>
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>

2
docs/index.html
View File

@ -505,7 +505,7 @@
<li><a href="example-widgets.html">Repeat Headers widget</a> (v2.0.5; <span class="version updated">v2.9</span>)</li>
<li><span class="results">&dagger;</span> <a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.15.12</span>)</li>
<li><span class="results">&dagger;</span> <a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li>
<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>; <span class="version updated">v2.17.0</span>).</li>
<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>; <span class="version updated">v2.17.2</span>).</li>
<li><span class="label label-info">Beta</span> <a href="example-widget-static-row.html">StaticRow widget</a> (<span class="version">v2.16</span>).</li>
<li><span class="results">&dagger;</span> <a href="example-widget-sticky-header.html">Sticky header widget</a> (v2.0.21.1; <span class="version updated">v2.16.2</span>)</li>
<li><a href="example-widget-css-sticky-header.html">Sticky header (css3) widget</a> (<span class="version">v2.14.2</span>; <span class="version updated">v2.16.4</span>).</li>

77
js/widgets/widget-scroller.js
View File

@ -53,8 +53,12 @@ ts.window_resize = function(){
// Add extra scroller css
$(function(){
var s = '<style>' +
'.tablesorter-scroller-reset { width: auto !important; } ' +
'.tablesorter-scroller { text-align: left; overflow: hidden; }' +
'.tablesorter-scroller-header { overflow: hidden; }' +
'.tablesorter-scroller-header table.tablesorter { margin-bottom: 0; }' +
'.tablesorter-scroller-table table.tablesorter { margin-top: 0; } ' +
'.tablesorter-scroller-table { overflow-y: scroll; }' +
'.tablesorter-scroller-table table.tablesorter { margin-top: 0; overflow: scroll; } ' +
'.tablesorter-scroller-table .tablesorter-filter-row, .tablesorter-scroller-table tfoot { display: none; }' +
'.tablesorter-scroller-table table.tablesorter thead tr.tablesorter-headerRow * {' +
'line-height:0;height:0;border:none;background-image:none;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;overflow:hidden;' +
@ -73,22 +77,20 @@ ts.addWidget({
},
init: function(table, thisWidget, c, wo){
var $win = $(window);
//Setup window.resizeEnd event
// Setup window.resizeEnd event
$win
.bind('resize', ts.window_resize)
.bind('resizeEnd', function() {
// init is run before format, so scroller_resizeWidth
// won't be defined within the "c" or "wo" parameters
if (typeof table.config.widgetOptions.scroller_resizeWidth === 'function') {
//IE calls resize when you modify content, so we have to unbind the resize event
//so we don't end up with an infinite loop. we can rebind after we're done.
// IE calls resize when you modify content, so we have to unbind the resize event
// so we don't end up with an infinite loop. we can rebind after we're done.
$win.unbind('resize', ts.window_resize);
table.config.widgetOptions.scroller_resizeWidth();
$win.bind('resize', ts.window_resize);
}
});
// required css definition
$('body').append('<style>.ts-scroller-reset { width: auto !important; }</style>');
},
format: function(table, c, wo) {
var h, $hdr, id, t, resize, $cells,
@ -99,11 +101,11 @@ ts.addWidget({
h = wo.scroller_height || 300;
t = $tbl.find('tbody').height();
if (t !== 0 && h > t) { h = t + 10; } // Table is less than h px
id = wo.scroller_id = wo.scroller_idPrefix + Math.floor(Math.random() * 101);
id = wo.scroller_id = wo.scroller_idPrefix + Math.floor(Math.random() * 1001);
$hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $tbl.find('thead:first').html() + '</thead></table>');
$tbl
.wrap('<div id="' + id + '" class="tablesorter-scroller" style="text-align:left;" />')
.wrap('<div id="' + id + '" class="tablesorter-scroller" />')
.before($hdr)
.find('.tablesorter-filter-row').addClass('hideme');
@ -111,7 +113,7 @@ ts.addWidget({
.wrap('<div class="tablesorter-scroller-header" style="width:' + $tbl.width() + ';" />')
.find('.' + ts.css.header);
$tbl.wrap('<div class="tablesorter-scroller-table" style="height:' + h + 'px;width:' + $tbl.width() + ';overflow-y:scroll;" />');
$tbl.wrap('<div class="tablesorter-scroller-table" style="height:' + h + 'px;width:' + $tbl.width() + ';" />');
// make scroller header sortable
ts.bindEvents(table, $cells);
@ -122,48 +124,57 @@ ts.addWidget({
}
resize = function(){
var d, b,
//Hide other scrollers so we can resize
var d, b, $h, $th, w,
// Hide other scrollers so we can resize
$div = $('div.scroller[id != "' + id + '"]').hide();
$tbl.find('thead').show();
//Reset sizes so parent can resize.
// Reset sizes so parent can resize.
$tbl
.addClass('ts-scroller-reset')
.find('thead').find('.tablesorter-header-inner').addClass('ts-scroller-reset');
.addClass('tablesorter-scroller-reset')
.find('thead').find('.tablesorter-header-inner').addClass('tablesorter-scroller-reset');
d = $tbl.parent();
d.addClass('ts-scroller-reset');
d.addClass('tablesorter-scroller-reset');
d.parent().trigger('resize');
// Shrink a bit to accommodate scrollbar
d.width( d.parent().innerWidth() - ( d.parent().hasScrollBar() ? wo.scroller_barWidth : 0 ) );
w = d.innerWidth() - ( d.hasScrollBar() ? wo.scroller_barWidth : 0 );
$tbl.width( w );
$hdr.width( w );
$hdr.parent().width( w );
$tbl.width( d.innerWidth() - ( d.hasScrollBar() ? wo.scroller_barWidth : 0 ) );
$tbl.parent().find('.ts-scroller-reset').removeClass('ts-scroller-reset');
$tbl.closest('.tablesorter-scroller').find('.tablesorter-scroller-reset').removeClass('tablesorter-scroller-reset');
// include left & right border widths
b = parseInt( $tbl.css('border-left-width'), 10 ) + parseInt( $tbl.css('border-right-width'), 10 );
$h = $hdr.find('thead').children().children();
$tbl.find('thead').find('th,td').filter(':visible').each(function(i, c){
var $th = $(c).find('.tablesorter-header-inner'),
// wrap in browser detect??
w = parseInt( $th.css('min-width').replace('auto', '0').replace(/(px|em)/, ''), 10 );
if ( $th.width() < w ) {
$th.width(w);
} else {
w = $th.width();
// adjust cloned header to match original table width - includes wrappers, headers, and header inner div
$tbl.find('thead').children().children().each(function(i, c){
$th = $(c).find('.tablesorter-header-inner');
if ($th.length) {
// I have no idea why this is in here anymore LOL
w = parseInt( $th.css('min-width').replace('auto', '0').replace(/(px|em)/, ''), 10 );
if ( $th.width() < w ) {
$th.width(w);
} else {
w = $th.width();
}
$h.eq(i)
.find('.tablesorter-header-inner').width(w - b)
// set inner width first
.parent()
.width( $th.parent().width() - b )
}
$hdr.find('th,td').filter(':visible').eq(i).find('.tablesorter-header-inner').width(w - b);
});
$hdr.width($tbl.innerWidth());
$hdr.parent().width($tbl.innerWidth());
$div.show();
};
//Expose to external calls
// Expose to external calls
wo.scroller_resizeWidth = resize;
resize();
@ -172,6 +183,7 @@ ts.addWidget({
c.isScrolling = true;
t = $tbl.parent().parent().height();
// The header will always jump into view if scrolling the table body
$tbl.parent().bind('scroll', function(){
if (wo.scroller_jumpToHeader) {
@ -180,11 +192,12 @@ ts.addWidget({
$win.scrollTop( $hdr.offset().top );
}
}
$hdr.parent().scrollLeft( $(this).scrollLeft() );
});
}
//Sorting, so scroll to top
// Sorting, so scroll to top
$tbl.parent().animate({ scrollTop: 0 }, 'fast');
},