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

Scroller: reduce init lag & correct no fixed column tbody width. See #906

Browse Source
This commit is contained in:
Mottie 2015-06-01 20:28:59 -05:00
parent 7f9258f1e1
commit 1fb45130ce
2 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -215,7 +215,7 @@ $(function() {
<li>Add support for multiple tbodies in fixed columns: <li>Add support for multiple tbodies in fixed columns:
<ul> <ul>
<li><span class="label warning">*WARN*</span> <code>colspan</code>s within information only tbodies are still problematic!</li> <li><span class="label warning">*WARN*</span> <code>colspan</code>s within information only tbodies are still problematic!</li>
<li>If a <code>colspan</code> is to be used with fixed columns, then split it so that the <code>colspan</code> splits at the edge of fixed column; e.g. for a table with 10 columns and 2 fixed columns, split the original table cell with a colspan of 10 into two table cells of that have colspans of 2 and 8.</li> <li>If a <code>colspan</code> is to be used with fixed columns, then split it so that the <code>colspan</code> splits at the edge of fixed column; please see <a href="https://github.com/Mottie/tablesorter/issues/906#issuecomment-107714357">this comment</a> for more details &amp; a demo.</li>
</ul> </ul>
</li> </li>
<li>The horizontal scrollbar no longer appears under the fixed column: <li>The horizontal scrollbar no longer appears under the fixed column:

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

@ -196,6 +196,9 @@ ts.scroller = {
id = c.namespace.slice( 1 ) + 'tsscroller', id = c.namespace.slice( 1 ) + 'tsscroller',
$table = c.$table; $table = c.$table;
wo.scroller_calcWidths = [];
wo.scroller_isBusy = true;
// set scrollbar width & allow setting width to zero // set scrollbar width & allow setting width to zero
wo.scroller_barSetWidth = wo.scroller_barWidth !== null ? wo.scroller_barSetWidth = wo.scroller_barWidth !== null ?
wo.scroller_barWidth : wo.scroller_barWidth :
@ -342,21 +345,22 @@ ts.scroller = {
$div = $( 'div.' + tscss.scrollerWrap + '[id!="' + id + '"]' ) $div = $( 'div.' + tscss.scrollerWrap + '[id!="' + id + '"]' )
.addClass( tscss.scrollerHideElement ); .addClass( tscss.scrollerHideElement );
wo.scroller_calcWidths = [];
// Remove fixed so we get proper widths and heights // Remove fixed so we get proper widths and heights
ts.scroller.removeFixed( c, wo ); ts.scroller.removeFixed( c, wo );
// show original table thead to get proper alignments // show original table elements to get proper alignment
$table.children( 'thead' ).removeClass( tscss.scrollerHideElement ); $table
.find( '.' + tscss.scrollerHideElement )
.removeClass( tscss.scrollerHideElement );
// Reset sizes so parent can resize. // Reset sizes so parent can resize.
$table $table
.addClass( tscss.scrollerReset ) .addClass( tscss.scrollerReset )
.children( 'thead' ) .children( 'thead' )
.find( '.' + tscss.headerIn ) .find( '.' + tscss.headerIn )
.addClass( tscss.scrollerReset ) .addClass( tscss.scrollerReset );
.end()
.find( '.' + tscss.filterRow )
.removeClass( tscss.scrollerHideElement );
$tableWrap.addClass( tscss.scrollerReset ); $tableWrap.addClass( tscss.scrollerReset );
// include left & right border widths // include left & right border widths
@ -382,13 +386,10 @@ ts.scroller = {
.filter( ':visible' ); .filter( ':visible' );
ts.scroller.setWidth( $hCells.add( $bCells ).add( $fCells ), '' ); ts.scroller.setWidth( $hCells.add( $bCells ).add( $fCells ), '' );
$headers = $table $headers = c.$headerIndexed;
.children( 'thead' )
.children()
.eq( 0 )
.children( 'th, td' );
for ( index = 0; index < $headers.length; index++ ) { for ( index = 0; index < $headers.length; index++ ) {
$this = $headers.eq( index ); $this = $headers[ 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' ) {
setWidth = $this.outerWidth(); setWidth = $this.outerWidth();
@ -410,19 +411,25 @@ ts.scroller = {
.add( $bCells.eq( index ) ) .add( $bCells.eq( index ) )
.add( $fCells.eq( index ) ); .add( $fCells.eq( index ) );
ts.scroller.setWidth( temp, setWidth ); ts.scroller.setWidth( temp, setWidth );
// save current widths
wo.scroller_calcWidths[ index ] = setWidth;
} }
temp = $tableWrap.parent().innerWidth() - temp = $tableWrap.parent().innerWidth() -
( ts.scroller.hasScrollBar( $tableWrap ) ? wo.scroller_barSetWidth : 0 ); ( ts.scroller.hasScrollBar( $tableWrap ) ? wo.scroller_barSetWidth : 0 );
$tableWrap.width( temp ); $tableWrap.width( temp );
setWidth = $tableWrap.innerWidth() -
( ts.scroller.hasScrollBar( $tableWrap ) ? wo.scroller_barSetWidth : 0 ) + borderWidth; temp = ( ts.scroller.hasScrollBar( $tableWrap ) ? wo.scroller_barSetWidth : 0 ) + borderWidth;
setWidth = $tableWrap.innerWidth() - temp;
$hdr $hdr
.parent() .parent()
.add( $foot.parent() ) .add( $foot.parent() )
.width( setWidth ); .width( setWidth );
$tableWrap
.width( setWidth + temp );
wo.scroller_$container wo.scroller_$container
.find( '.' + tscss.scrollerReset ) .find( '.' + tscss.scrollerReset )
.removeClass( tscss.scrollerReset ); .removeClass( tscss.scrollerReset );
@ -535,7 +542,9 @@ ts.scroller = {
bindFixedColumnEvents : function( c, wo ) { bindFixedColumnEvents : function( c, wo ) {
// update thead & tbody in fixed column // update thead & tbody in fixed column
var namespace = c.namespace + 'tsscrollerFixed', var namespace = c.namespace + 'tsscrollerFixed',
events = ( 'tablesorter-initialized sortEnd filterEnd ' ).split( ' ' ).join( namespace + ' ' ), // bind to ts-init or filterEnd, but not both!
events = ( ( ts.hasWidget( c.table, 'filter' ) ? 'filterEnd' : 'tablesorter-initialized' ) +
' sortEnd ' ).split( ' ' ).join( namespace + ' ' ),
events2 = 'scroll' + namespace, events2 = 'scroll' + namespace,
$fixedTbody = wo.scroller_$fixedColumns.find( '.' + tscss.scrollerTable ), $fixedTbody = wo.scroller_$fixedColumns.find( '.' + tscss.scrollerTable ),
fixedScroll = true, fixedScroll = true,
@ -551,6 +560,7 @@ ts.scroller = {
// *** SCROLL *** scroll fixed column along with main // *** SCROLL *** scroll fixed column along with main
.off( events2 ) .off( events2 )
.on( events2, function() { .on( events2, function() {
if ( wo.scroller_isBusy ) { return; }
// using flags to prevent firing the scroll event excessively leading to slow scrolling in Firefox // using flags to prevent firing the scroll event excessively leading to slow scrolling in Firefox
if ( fixedScroll || !ts.scroller.isFirefox ) { if ( fixedScroll || !ts.scroller.isFirefox ) {
tableScroll = false; tableScroll = false;
@ -611,6 +621,7 @@ ts.scroller = {
var $wrapper = wo.scroller_$container; var $wrapper = wo.scroller_$container;
if ( wo.scroller_fixedColumns === 0 ) { if ( wo.scroller_fixedColumns === 0 ) {
wo.scroller_isBusy = false;
ts.scroller.removeFixed( c, wo ); ts.scroller.removeFixed( c, wo );
return; return;
} }
@ -619,6 +630,8 @@ ts.scroller = {
return; return;
} }
wo.scroller_isBusy = true;
// Make sure the wo.scroller_$fixedColumns container exists if not build it // Make sure the wo.scroller_$fixedColumns container exists if not build it
if ( !$wrapper.find( '.' + tscss.scrollerFixed ).length ) { if ( !$wrapper.find( '.' + tscss.scrollerFixed ).length ) {
ts.scroller.setupFixed( c, wo ); ts.scroller.setupFixed( c, wo );
@ -626,7 +639,7 @@ ts.scroller = {
// scroller_fixedColumns // scroller_fixedColumns
var index, tbodyIndex, rowIndex, $tbody, $adjCol, $fb, $fixHead, $fixBody, $fixFoot, var index, tbodyIndex, rowIndex, $tbody, $adjCol, $fb, $fixHead, $fixBody, $fixFoot,
totalRows, widths, temp, adj, row, totalRows, temp, adj, row,
$table = c.$table, $table = c.$table,
$tableWrap = $table.parent(), $tableWrap = $table.parent(),
$hdr = wo.scroller_$header, $hdr = wo.scroller_$header,
@ -663,19 +676,15 @@ ts.scroller = {
borderSpacing = parseInt( ( $temp.css( 'border-spacing' ) || '' ).split( /\s/ )[ 0 ], 10 ) / 2 || 0, borderSpacing = parseInt( ( $temp.css( 'border-spacing' ) || '' ).split( /\s/ )[ 0 ], 10 ) / 2 || 0,
totalWidth = parseInt( $table.css( 'padding-left' ), 10 ) + totalWidth = parseInt( $table.css( 'padding-left' ), 10 ) +
parseInt( $table.css( 'padding-right' ), 10 ) - parseInt( $table.css( 'padding-right' ), 10 ) -
borderRightWidth; borderRightWidth,
widths = wo.scroller_calcWidths;
ts.scroller.removeFixed( c, wo, false ); ts.scroller.removeFixed( c, wo, false );
// recalculate widths // calculate fixed column width
$table.children( 'thead' ).removeClass( tscss.scrollerHideElement ); for ( index = 0; index < fixedColumns; index++ ) {
widths = []; totalWidth += widths[ index ] + borderSpacing;
for ( index = 0; index < c.columns; index++ ) {
temp = c.$headerIndexed[ index ].outerWidth();
totalWidth += index < fixedColumns ? temp + borderSpacing : 0;
widths.push( temp );
} }
$table.children( 'thead' ).addClass( tscss.scrollerHideElement );
// set fixed column width // set fixed column width
totalWidth = totalWidth + borderRightWidth * 2 - borderSpacing; totalWidth = totalWidth + borderRightWidth * 2 - borderSpacing;
@ -795,6 +804,7 @@ ts.scroller = {
$fixedColumn.removeClass( tscss.scrollerHideElement ); $fixedColumn.removeClass( tscss.scrollerHideElement );
wo.scroller_isBusy = false;
}, },
fixHeight : function( $rows, $fixedRows ) { fixHeight : function( $rows, $fixedRows ) {