Pager: (widget) make compatible with stickyHeaders. Fixes #1313

* Removed all references to stored pager.$goto and pager.$size
* Removed check if header text matches header length - this breaks
  when a header row has a "tablesorter-ignoreRow" class name.
* Add stickyHeader container to pager.$container in case the pager
  controls are inside the thead
This commit is contained in:
Rob Garrison 2016-12-16 17:13:02 -06:00
parent 1d6a07321a
commit 3165a50ebd
2 changed files with 61 additions and 55 deletions

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@
prev : '.prev', // previous page arrow prev : '.prev', // previous page arrow
next : '.next', // next page arrow next : '.next', // next page arrow
last : '.last', // go to last page arrow last : '.last', // go to last page arrow
// goto is a reserved word #657
gotoPage : '.gotoPage', // go to page selector - select dropdown that sets the current page gotoPage : '.gotoPage', // go to page selector - select dropdown that sets the current page
pageDisplay : '.pagedisplay', // location of where the 'output' is displayed pageDisplay : '.pagedisplay', // location of where the 'output' is displayed
pageSize : '.pagesize' // page size selector - select dropdown that sets the 'size' option pageSize : '.pagesize' // page size selector - select dropdown that sets the 'size' option
@ -168,10 +169,6 @@
p.size = $.data( table, 'pagerLastSize' ) || wo.pager_size; p.size = $.data( table, 'pagerLastSize' ) || wo.pager_size;
// added in case the pager is reinitialized after being destroyed. // added in case the pager is reinitialized after being destroyed.
p.$container = $( s.container ).addClass( wo.pager_css.container ).show(); p.$container = $( s.container ).addClass( wo.pager_css.container ).show();
// goto selector
p.$goto = p.$container.find( s.gotoPage ); // goto is a reserved word #657
// page size selector
p.$size = p.$container.find( s.pageSize );
p.totalRows = c.$tbodies.eq( 0 ) p.totalRows = c.$tbodies.eq( 0 )
.children( 'tr' ) .children( 'tr' )
.not( wo.pager_countChildRows ? '' : '.' + c.cssChildRow ) .not( wo.pager_countChildRows ? '' : '.' + c.cssChildRow )
@ -184,7 +181,7 @@
p.page = ( isNaN( t.page ) ? p.page : t.page ) || p.setPage || 0; p.page = ( isNaN( t.page ) ? p.page : t.page ) || p.setPage || 0;
p.size = t.size === 'all' ? t.size : ( isNaN( t.size ) ? p.size : t.size ) || p.setSize || 10; p.size = t.size === 'all' ? t.size : ( isNaN( t.size ) ? p.size : t.size ) || p.setSize || 10;
$.data( table, 'pagerLastSize', p.size ); $.data( table, 'pagerLastSize', p.size );
p.$size.val( p.size ); p.$container.find( s.pageSize ).val( p.size );
} }
// skipped rows // skipped rows
@ -243,7 +240,7 @@
}, },
bindEvents: function( c ) { bindEvents: function( c ) {
var ctrls, fxn, var ctrls, fxn, tmp,
p = c.pager, p = c.pager,
wo = c.widgetOptions, wo = c.widgetOptions,
namespace = c.namespace + 'pager', namespace = c.namespace + 'pager',
@ -359,8 +356,9 @@
} }
}); });
if ( p.$goto.length ) { tmp = p.$container.find( wo.pager_selectors.gotoPage );
p.$goto if ( tmp.length ) {
tmp
.off( 'change' + namespace ) .off( 'change' + namespace )
.on( 'change' + namespace, function() { .on( 'change' + namespace, function() {
p.page = $( this ).val() - 1; p.page = $( this ).val() - 1;
@ -371,15 +369,17 @@
console.warn( 'Pager: >> Goto selector not found' ); console.warn( 'Pager: >> Goto selector not found' );
} }
if ( p.$size.length ) { tmp = p.$container.find( wo.pager_selectors.pageSize );
if ( tmp.length ) {
// setting an option as selected appears to cause issues with initial page size // setting an option as selected appears to cause issues with initial page size
p.$size.find( 'option' ).removeAttr( 'selected' ); tmp.find( 'option' ).removeAttr( 'selected' );
p.$size tmp
.off( 'change' + namespace ) .off( 'change' + namespace )
.on( 'change' + namespace, function() { .on( 'change' + namespace, function() {
if ( !$( this ).hasClass( wo.pager_css.disabled ) ) { if ( !$( this ).hasClass( wo.pager_css.disabled ) ) {
var size = $( this ).val(); var size = $( this ).val();
p.$size.val( size ); // in case there are more than one pagers // in case there are more than one pager
p.$container.find( wo.pager_selectors.pageSize ).val( size );
tsp.setPageSize( c, size ); tsp.setPageSize( c, size );
tsp.changeHeight( c ); tsp.changeHeight( c );
} }
@ -447,8 +447,7 @@
sz = tsp.parsePageSize( c, p.size, 'get' ); // don't allow dividing by zero sz = tsp.parsePageSize( c, p.size, 'get' ); // don't allow dividing by zero
if ( sz === 'all' ) { sz = p.totalRows; } if ( sz === 'all' ) { sz = p.totalRows; }
if ( wo.pager_countChildRows ) { t[ t.length ] = c.cssChildRow; } if ( wo.pager_countChildRows ) { t[ t.length ] = c.cssChildRow; }
p.$size p.$container.find( wo.pager_selectors.pageSize + ',' + wo.pager_selectors.gotoPage )
.add( p.$goto )
.removeClass( wo.pager_css.disabled ) .removeClass( wo.pager_css.disabled )
.removeAttr( 'disabled' ) .removeAttr( 'disabled' )
.prop( 'aria-disabled', 'false' ); .prop( 'aria-disabled', 'false' );
@ -494,7 +493,7 @@
p[ str ] || ( data ? data[ str ] : deflt ) || deflt; p[ str ] || ( data ? data[ str ] : deflt ) || deflt;
}); });
} }
if ( p.$goto.length ) { if ( p.$container.find( wo.pager_selectors.gotoPage ).length ) {
t = ''; t = '';
options = tsp.buildPageSelect( c, p ); options = tsp.buildPageSelect( c, p );
len = options.length; len = options.length;
@ -502,7 +501,7 @@
t += '<option value="' + options[ indx ] + '">' + options[ indx ] + '</option>'; t += '<option value="' + options[ indx ] + '">' + options[ indx ] + '</option>';
} }
// innerHTML doesn't work in IE9 - http://support2.microsoft.com/kb/276228 // innerHTML doesn't work in IE9 - http://support2.microsoft.com/kb/276228
p.$goto.html( t ).val( p.page + 1 ); p.$container.find( wo.pager_selectors.gotoPage ).html( t ).val( p.page + 1 );
} }
if ( $out.length ) { if ( $out.length ) {
$out[ ($out[ 0 ].nodeName === 'INPUT' ) ? 'val' : 'html' ]( s ); $out[ ($out[ 0 ].nodeName === 'INPUT' ) ? 'val' : 'html' ]( s );
@ -687,9 +686,10 @@
hideRowsSetup: function( c ) { hideRowsSetup: function( c ) {
var p = c.pager, var p = c.pager,
namespace = c.namespace + 'pager', namespace = c.namespace + 'pager',
size = p.$size.val(); $el = p.$container.find( wo.pager_selectors.pageSize ),
size = $el.val();
p.size = tsp.parsePageSize( c, size, 'get' ); p.size = tsp.parsePageSize( c, size, 'get' );
p.$size.val( p.size ); $el.val( p.size );
$.data( c.table, 'pagerLastSize', p.size ); $.data( c.table, 'pagerLastSize', p.size );
tsp.pagerArrows( c ); tsp.pagerArrows( c );
if ( !c.widgetOptions.pager_removeRows ) { if ( !c.widgetOptions.pager_removeRows ) {
@ -774,8 +774,6 @@
} }
} }
wo.pager_processAjaxOnInit = true; wo.pager_processAjaxOnInit = true;
// only add new header text if the length matches
if ( th && th.length === hl ) {
hsh = $table.hasClass( 'hasStickyHeaders' ); hsh = $table.hasClass( 'hasStickyHeaders' );
$sh = hsh ? wo.$sticky.children( 'thead:first' ).children( 'tr' ).children() : ''; $sh = hsh ? wo.$sticky.children( 'thead:first' ).children( 'tr' ).children() : '';
$f = $table.find( 'tfoot tr:first' ).children(); $f = $table.find( 'tfoot tr:first' ).children();
@ -795,11 +793,15 @@
} else { } else {
$h.find( '.tablesorter-header-inner' ).html( th[ j ] ); $h.find( '.tablesorter-header-inner' ).html( th[ j ] );
if ( hsh && $sh.length ) { if ( hsh && $sh.length ) {
// add sticky header to container just in case it contains pager controls
p.$container = p.$container.add($sh);
$sh.eq( j ).find( '.tablesorter-header-inner' ).html( th[ j ] ); $sh.eq( j ).find( '.tablesorter-header-inner' ).html( th[ j ] );
} }
} }
$f.eq( j ).html( th[ j ] ); $f.eq( j ).html( th[ j ] );
} }
if (hsh) {
tsp.bindEvents( c );
} }
} }
if ( c.showProcessing ) { if ( c.showProcessing ) {
@ -1006,9 +1008,11 @@
} }
} }
// disable size selector // disable size selector
$controls = p.$size $controls = p.$container.find(
.add( p.$goto ) wo.pager_selectors.pageSize + ',' +
.add( p.$container.find( '.ts-startRow, .ts-page ' ) ); wo.pager_selectors.gotoPage + ',' +
'.ts-startRow, .ts-page'
);
len = $controls.length; len = $controls.length;
for ( index = 0; index < len; index++ ) { for ( index = 0; index < len; index++ ) {
$controls.eq( index ) $controls.eq( index )
@ -1122,7 +1126,7 @@
var p = c.pager, var p = c.pager,
s = parseInt( size, 10 ) || p.size || c.widgetOptions.pager_size || 10; s = parseInt( size, 10 ) || p.size || c.widgetOptions.pager_size || 10;
return p.initialized && (/all/i.test( size ) || s === p.totalRows) ? return p.initialized && (/all/i.test( size ) || s === p.totalRows) ?
// "get" to set `p.size` or "set" to set `p.$size.val()` // "get" to set `p.size` or "set" to set `pageSize.val()`
'all' : ( mode === 'get' ? s : p.size ); 'all' : ( mode === 'get' ? s : p.size );
}, },
@ -1138,7 +1142,9 @@
var p = c.pager, var p = c.pager,
table = c.table; table = c.table;
p.size = tsp.parsePageSize( c, size, 'get' ); p.size = tsp.parsePageSize( c, size, 'get' );
p.$size.val( tsp.parsePageSize( c, p.size, 'set' ) ); p.$container
.find( c.widgetOptions.pager_selectors.pageSize )
.val( tsp.parsePageSize( c, p.size, 'set' ) );
$.data( table, 'pagerLastPage', tsp.parsePageNumber( c, p ) ); $.data( table, 'pagerLastPage', tsp.parsePageNumber( c, p ) );
$.data( table, 'pagerLastSize', p.size ); $.data( table, 'pagerLastSize', p.size );
p.totalPages = p.size === 'all' ? 1 : Math.ceil( p.totalRows / p.size ); p.totalPages = p.size === 'all' ? 1 : Math.ceil( p.totalRows / p.size );
@ -1197,27 +1203,27 @@
ts.storage( table, c.widgetOptions.pager_storageKey, '' ); ts.storage( table, c.widgetOptions.pager_storageKey, '' );
} }
p.$container = null; p.$container = null;
p.$goto = null;
p.$size = null;
c.pager = null; c.pager = null;
c.rowsCopy = null; c.rowsCopy = null;
} }
}, },
enablePager: function( c, triggered ) { enablePager: function( c, triggered ) {
var info, size, $el, var info, size,
table = c.table, table = c.table,
p = c.pager; p = c.pager,
wo = c.widgetOptions,
$el = p.$container.find( wo.pager_selectors.pageSize );
p.isDisabled = false; p.isDisabled = false;
p.page = $.data( table, 'pagerLastPage' ) || p.page || 0; p.page = $.data( table, 'pagerLastPage' ) || p.page || 0;
size = p.$size.find( 'option[selected]' ).val(); size = $el.find('option[selected]' ).val();
p.size = $.data( table, 'pagerLastSize' ) || tsp.parsePageSize( c, size, 'get' ); p.size = $.data( table, 'pagerLastSize' ) || tsp.parsePageSize( c, size, 'get' );
p.$size.val( p.size ); // set page size $el.val( p.size ); // set page size
p.totalPages = p.size === 'all' ? 1 : Math.ceil( tsp.getTotalPages( c, p ) / p.size ); p.totalPages = p.size === 'all' ? 1 : Math.ceil( tsp.getTotalPages( c, p ) / p.size );
c.$table.removeClass( 'pagerDisabled' ); c.$table.removeClass( 'pagerDisabled' );
// if table id exists, include page display with aria info // if table id exists, include page display with aria info
if ( table.id && !c.$table.attr( 'aria-describedby' ) ) { if ( table.id && !c.$table.attr( 'aria-describedby' ) ) {
$el = p.$container.find( c.widgetOptions.pager_selectors.pageDisplay ); $el = p.$container.find( wo.pager_selectors.pageDisplay );
info = $el.attr( 'id' ); info = $el.attr( 'id' );
if ( !info ) { if ( !info ) {
// only add pageDisplay id if it doesn't exist - see #1288 // only add pageDisplay id if it doesn't exist - see #1288