Pager: fix rendering of sticky headers after ajax

This commit is contained in:
Rob Garrison 2016-12-16 17:49:18 -06:00
parent 822613ae4f
commit 744b642bef
4 changed files with 35 additions and 27 deletions

View File

@ -173,7 +173,7 @@
updatePageDisplay = function(table, p, completed) { updatePageDisplay = function(table, p, completed) {
if ( p.initializing ) { return; } if ( p.initializing ) { return; }
var s, t, $out, indx, len, options, var s, t, $out, $el, indx, len, options,
c = table.config, c = table.config,
namespace = c.namespace + 'pager', namespace = c.namespace + 'pager',
sz = parsePageSize( p, p.size, 'get' ); // don't allow dividing by zero sz = parsePageSize( p, p.size, 'get' ); // don't allow dividing by zero
@ -218,7 +218,8 @@
return extra.length > 1 && data && data[extra[0]] ? data[extra[0]][extra[1]] : p[str] || (data ? data[str] : deflt) || deflt; return extra.length > 1 && data && data[extra[0]] ? data[extra[0]][extra[1]] : p[str] || (data ? data[str] : deflt) || deflt;
}); });
} }
if ( p.$goto.length ) { $el = p.$container.find(p.cssGoto);
if ( $el.length ) {
t = ''; t = '';
options = buildPageSelect( table, p ); options = buildPageSelect( table, p );
len = options.length; len = options.length;
@ -226,7 +227,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 ); $el.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);
@ -388,8 +389,9 @@
}, },
hideRowsSetup = function(table, p){ hideRowsSetup = function(table, p){
p.size = parsePageSize( p, p.$size.val(), 'get' ); var $el = p.$container.find(p.cssPageSize);
p.$size.val( p.size ); p.size = parsePageSize( p, $el.val(), 'get' );
$el.val( p.size );
$.data(table, 'pagerLastSize', p.size); $.data(table, 'pagerLastSize', p.size);
pagerArrows( table, p ); pagerArrows( table, p );
if ( !p.removeRows ) { if ( !p.removeRows ) {
@ -473,7 +475,9 @@
// only add new header text if the length matches // only add new header text if the length matches
if ( th && th.length === hl ) { if ( th && th.length === hl ) {
hsh = $table.hasClass('hasStickyHeaders'); hsh = $table.hasClass('hasStickyHeaders');
$sh = hsh ? c.widgetOptions.$sticky.children('thead:first').children('tr').children() : ''; $sh = hsh ?
c.widgetOptions.$sticky.children('thead:first').children('tr:not(.' + c.cssIgnoreRow + ')').children() :
'';
$f = $table.find('tfoot tr:first').children(); $f = $table.find('tfoot tr:first').children();
// don't change td headers (may contain pager) // don't change td headers (may contain pager)
$headers = c.$headers.filter( 'th ' ); $headers = c.$headers.filter( 'th ' );
@ -491,6 +495,8 @@
} 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( wo.$sticky );
$sh.eq(j).find('.tablesorter-header-inner').html( th[j] ); $sh.eq(j).find('.tablesorter-header-inner').html( th[j] );
} }
} }
@ -693,9 +699,7 @@
} }
} }
// disable size selector // disable size selector
$controls = p.$size $controls = p.$container.find( p.cssGoto + ',' + p.cssPageSize + ', .ts-startRow, .ts-page' );
.add( p.$goto )
.add( p.$container.find( '.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 ).addClass( p.cssDisabled )[0].disabled = true; $controls.eq( index ).addClass( p.cssDisabled )[0].disabled = true;
@ -798,7 +802,7 @@
parsePageSize = function( p, size, mode ) { parsePageSize = function( p, size, mode ) {
var s = parseInt( size, 10 ) || p.size || p.settings.size || 10; var s = parseInt( size, 10 ) || p.size || p.settings.size || 10;
return p.initialized && (/all/i.test( size ) || s === p.totalRows) ? return p.initialized && (/all/i.test( size ) || s === p.totalRows) ?
// "get" to get `p.size` or "set" to set `p.$size.val()` // "get" to get `p.size` or "set" to set `pageSize.val()`
'all' : ( mode === 'get' ? s : p.size ); 'all' : ( mode === 'get' ? s : p.size );
}, },
@ -812,7 +816,7 @@
setPageSize = function(table, size, p) { setPageSize = function(table, size, p) {
p.size = parsePageSize( p, size, 'get' ); p.size = parsePageSize( p, size, 'get' );
p.$size.val( parsePageSize( p, p.size, 'set' ) ); p.$container.find(p.cssPageSize).val( parsePageSize( p, p.size, 'set' ) );
$.data(table, 'pagerLastPage', parsePageNumber( table, p ) ); $.data(table, 'pagerLastPage', parsePageNumber( table, 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 );
@ -887,7 +891,7 @@
enablePager = function(table, p, triggered) { enablePager = function(table, p, triggered) {
var info, size, $el, var info, size, $el,
c = table.config; c = table.config;
p.$size.add(p.$goto).add(p.$container.find('.ts-startRow, .ts-page')) p.$container.find(p.cssGoto + ',' + p.cssPageSize + ',.ts-startRow, .ts-page')
.removeClass(p.cssDisabled) .removeClass(p.cssDisabled)
.removeAttr('disabled') .removeAttr('disabled')
.each(function(){ .each(function(){
@ -895,9 +899,10 @@
}); });
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(); $el = p.$container.find(p.cssPageSize);
size = $el.find('option[selected]').val();
p.size = $.data(table, 'pagerLastSize') || parsePageSize( p, size, 'get' ); p.size = $.data(table, 'pagerLastSize') || parsePageSize( p, 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( getTotalPages( table, p ) / p.size ); p.totalPages = p.size === 'all' ? 1 : Math.ceil( getTotalPages( table, p ) / p.size );
// 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' ) ) {
@ -923,7 +928,7 @@
}, },
init = function(table, settings) { init = function(table, settings) {
var t, ctrls, fxn, size, var t, ctrls, fxn, size, $el,
c = table.config, c = table.config,
wo = c.widgetOptions, wo = c.widgetOptions,
p = c.pager = $.extend( true, {}, $.tablesorterPager.defaults, settings ), p = c.pager = $.extend( true, {}, $.tablesorterPager.defaults, settings ),
@ -1057,9 +1062,9 @@
}); });
// goto selector // goto selector
p.$goto = pager.find(p.cssGoto); $el = pager.find(p.cssGoto);
if ( p.$goto.length ) { if ( $el.length ) {
p.$goto $el
.unbind('change' + namespace) .unbind('change' + namespace)
.bind('change' + namespace, function(){ .bind('change' + namespace, function(){
p.page = $(this).val() - 1; p.page = $(this).val() - 1;
@ -1070,14 +1075,15 @@
console.warn('Pager: >> Goto selector not found'); console.warn('Pager: >> Goto selector not found');
} }
// page size selector // page size selector
p.$size = pager.find(p.cssPageSize); $el = pager.find(p.cssPageSize);
if ( p.$size.length ) { if ( $el.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'); $el.find('option').removeAttr('selected');
p.$size.unbind('change' + namespace).bind('change' + namespace, function() { $el.unbind('change' + namespace).bind('change' + namespace, function() {
if ( !$(this).hasClass(p.cssDisabled) ) { if ( !$(this).hasClass(p.cssDisabled) ) {
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(p.cssGoto).val( size );
setPageSize(table, size, p); setPageSize(table, size, p);
changeHeight(table, p); changeHeight(table, p);
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -775,7 +775,9 @@
} }
wo.pager_processAjaxOnInit = true; wo.pager_processAjaxOnInit = true;
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:not(.' + c.cssIgnoreRow + ')' ).children() :
'';
$f = $table.find( 'tfoot tr:first' ).children(); $f = $table.find( 'tfoot tr:first' ).children();
// don't change td headers (may contain pager) // don't change td headers (may contain pager)
$headers = c.$headers.filter( 'th' ); $headers = c.$headers.filter( 'th' );
@ -794,7 +796,7 @@
$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 // add sticky header to container just in case it contains pager controls
p.$container = p.$container.add($sh); p.$container = p.$container.add( wo.$sticky );
$sh.eq( j ).find( '.tablesorter-header-inner' ).html( th[ j ] ); $sh.eq( j ).find( '.tablesorter-header-inner' ).html( th[ j ] );
} }
} }