mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Scroller: add missing tfoot rows. Fixes #825
This commit is contained in:
parent
68d6364a03
commit
c18d927d2c
@ -45,7 +45,7 @@
|
||||
|
||||
$('.tablesorter').tablesorter({
|
||||
theme: 'jui',
|
||||
widthFixed : true,
|
||||
// widthFixed: true, // <- now automatically set by the scroller widget
|
||||
showProcessing: true,
|
||||
headerTemplate : '{content} {icon}',
|
||||
widgets: [ 'uitheme', 'zebra', 'filter', 'scroller' ],
|
||||
@ -139,6 +139,18 @@ $(function() {
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.20.2</span>
|
||||
<ul>
|
||||
<li>This widget was updated to include the <code>tfoot</code> rows.</li>
|
||||
<li>To maintain the column widths across all copied tables:
|
||||
<ul>
|
||||
<li>The <code>widthFixed</code> options is now forcibly set to <code>true</code>; I apologize if this causes any inconvience.</li>
|
||||
<li>This option adds a <code><colgroup></code> containing percentage width <code><col></code> elements to each section of the scroller.</li>
|
||||
<li>If this option does cause issues, use css to set each column width as a percentage.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.17+</span>
|
||||
<ul>
|
||||
<li>The scroller widget will now work properly with predefined column widths.</li>
|
||||
|
@ -519,7 +519,7 @@
|
||||
<li><a href="example-widgets.html">Repeat Headers widget</a> (v2.0.5; <span class="version updated">v2.19.0</span>)</li>
|
||||
<li><span class="results">†</span> <a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.19.0</span>)</li>
|
||||
<li><span class="results">†</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.19.0</span>).</li>
|
||||
<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>; <span class="version updated">v2.20.2</span>).</li>
|
||||
<li><a href="example-widget-static-row.html">StaticRow widget</a> (<span class="version">v2.16</span>; <span class="version updated">v2.19.1</span>).</li>
|
||||
<li><span class="results">†</span> <a href="example-widget-sticky-header.html">Sticky header widget</a> (v2.0.21.1; <span class="version updated">v2.20.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.19.1</span>).</li>
|
||||
|
@ -57,10 +57,11 @@ $(function(){
|
||||
'.tablesorter-scroller { text-align: left; overflow: hidden; }' +
|
||||
'.tablesorter-scroller-header { 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; }' +
|
||||
'.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 * {' +
|
||||
'.tablesorter-scroller-table table.tablesorter { margin-top: 0; margin-bottom: 0; overflow: scroll; } ' +
|
||||
'.tablesorter-scroller-table .tablesorter-filter-row,.tablesorter-scroller-footer .tablesorter-filter-row,.tablesorter-scroller-table tfoot { display: none; }' +
|
||||
'.tablesorter-scroller-table table.tablesorter thead tr.tablesorter-headerRow *,.tablesorter-scroller-footer table.tablesorter thead * {' +
|
||||
'line-height:0;height:0;border:none;background-image:none;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;overflow:hidden;' +
|
||||
'}</style>';
|
||||
$(s).appendTo('body');
|
||||
@ -95,24 +96,37 @@ ts.addWidget({
|
||||
});
|
||||
},
|
||||
format: function(table, c, wo) {
|
||||
var maxHt, tbHt, $hdr, resize, getBarWidth, $cells,
|
||||
var maxHt, tbHt, $hdr, $t, resize, getBarWidth, $hCells, $fCells,
|
||||
$ft = [],
|
||||
// c.namespace contains a unique tablesorter ID, per table
|
||||
id = c.namespace.slice(1) + 'tsscroller',
|
||||
$win = $(window),
|
||||
$tbl = c.$table;
|
||||
|
||||
if (!c.isScrolling) {
|
||||
// force developer to set fixedWidth to maintain column widths
|
||||
c.widthFixed = true;
|
||||
maxHt = wo.scroller_height || 300;
|
||||
tbHt = $tbl.children('tbody').height();
|
||||
if (tbHt !== 0 && maxHt > tbHt) { maxHt = tbHt + 10; } // Table is less than h px
|
||||
|
||||
$hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0>' +
|
||||
'<thead>' + $tbl.find('thead:first').html() + '</thead>' +
|
||||
$tbl.children('thead')[0].outerHTML +
|
||||
'</table>');
|
||||
|
||||
$t = $tbl.children('tfoot');
|
||||
if ($t.length) {
|
||||
$ft = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0 style="margin-top:0"></table>')
|
||||
.append( $t.clone(true) ) // maintain any bindings on the tfoot cells
|
||||
.append( $tbl.children('thead')[0].outerHTML )
|
||||
.wrap('<div class="tablesorter-scroller-footer"/>');
|
||||
$fCells = $ft.children('tfoot').eq(0).children('tr').children();
|
||||
}
|
||||
|
||||
if (c.$extraTables && c.$extraTables.length) {
|
||||
c.$extraTables = c.$extraTables.add($hdr);
|
||||
c.$extraTables = c.$extraTables.add($hdr).add($ft);
|
||||
} else {
|
||||
c.$extraTables = $hdr;
|
||||
c.$extraTables = $hdr.add($ft);
|
||||
}
|
||||
$tbl
|
||||
.wrap('<div id="' + id + '" class="tablesorter-scroller" />')
|
||||
@ -120,15 +134,20 @@ ts.addWidget({
|
||||
// shrink filter row but don't completely hide it because the inputs/selectors may distort the columns
|
||||
.find('.tablesorter-filter-row').addClass('hideme');
|
||||
|
||||
$cells = $hdr
|
||||
.wrap('<div class="tablesorter-scroller-header" style="width:' + $tbl.width() + ';" />')
|
||||
if ($ft.length) {
|
||||
// $ft.parent() to include <div> wrapper
|
||||
$tbl.after( $ft.parent() );
|
||||
}
|
||||
|
||||
$hCells = $hdr
|
||||
.wrap('<div class="tablesorter-scroller-header" />')
|
||||
.find('.' + ts.css.header);
|
||||
|
||||
// use max-height, so the height resizes dynamically while filtering
|
||||
$tbl.wrap('<div class="tablesorter-scroller-table" style="max-height:' + maxHt + 'px;width:' + $tbl.width() + ';" />');
|
||||
$tbl.wrap('<div class="tablesorter-scroller-table" style="max-height:' + maxHt + 'px;" />');
|
||||
|
||||
// make scroller header sortable
|
||||
ts.bindEvents(table, $cells);
|
||||
ts.bindEvents(table, $hCells);
|
||||
|
||||
// look for filter widget
|
||||
if ($tbl.hasClass('hasFilters')) {
|
||||
@ -145,7 +164,7 @@ ts.addWidget({
|
||||
};
|
||||
|
||||
resize = function(){
|
||||
var d, b, $h, $th, w,
|
||||
var d, b, $h, w,
|
||||
// Hide other scrollers so we can resize
|
||||
$div = $('div.tablesorter-scroller[id != "' + id + '"]').hide();
|
||||
|
||||
@ -153,8 +172,7 @@ ts.addWidget({
|
||||
// only remove colgroup if it was added by the plugin
|
||||
// the $.tablesorter.fixColumnWidth() function already does this (v2.19.0)
|
||||
// but we need to get "accurate" resized measurements here - see issue #680
|
||||
$tbl.children('colgroup.tablesorter-colgroup').remove();
|
||||
$hdr.children('colgroup').remove();
|
||||
$tbl.add( $hdr ).add( $ft ).children('colgroup').remove();
|
||||
|
||||
// Reset sizes so parent can resize.
|
||||
$tbl
|
||||
@ -172,43 +190,24 @@ ts.addWidget({
|
||||
|
||||
// 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.width( w );
|
||||
$hdr.width( w );
|
||||
$hdr.parent().width( w );
|
||||
$tbl.add( $hdr ).add( $hdr.parent() ).add( $ft ).width( w );
|
||||
|
||||
$tbl
|
||||
.closest('.tablesorter-scroller')
|
||||
.find('.tablesorter-scroller-reset')
|
||||
.removeClass('tablesorter-scroller-reset');
|
||||
|
||||
$h = $hdr.find('thead').children().children();
|
||||
|
||||
// adjust cloned header to match original table width - includes wrappers, headers, and header inner div
|
||||
$tbl.children('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)
|
||||
.parent()
|
||||
.width( $th.parent().width() - b );
|
||||
}
|
||||
});
|
||||
|
||||
// refresh colgroup & copy to cloned header
|
||||
$.tablesorter.fixColumnWidth( table );
|
||||
$h = $tbl.children('colgroup').clone();
|
||||
$h = $tbl.children('colgroup');
|
||||
if ($h.length) {
|
||||
$hdr.prepend($h);
|
||||
b = $h[0].outerHTML;
|
||||
$hdr.prepend(b);
|
||||
if ($ft.length) {
|
||||
$ft.prepend(b);
|
||||
}
|
||||
}
|
||||
|
||||
// hide filter row because filterEnd event fires
|
||||
@ -250,6 +249,7 @@ ts.addWidget({
|
||||
var $table = c.$table,
|
||||
namespace = c.namespace + 'tsscroller';
|
||||
$table.closest('.tablesorter-scroller').find('.tablesorter-scroller-header').remove();
|
||||
$table.closest('.tablesorter-scroller').find('.tablesorter-scroller-footer').remove();
|
||||
$table
|
||||
.unwrap()
|
||||
.find('.tablesorter-filter-row').removeClass('hideme').end()
|
||||
|
Loading…
Reference in New Issue
Block a user