Merge pull request #42 from macfreek/master
Fixes for horizontal scrolling footers with fixed-columnsmaster
commit
41bf4b5f4d
|
@ -104,6 +104,8 @@
|
|||
}
|
||||
|
||||
.fancyTable thead tr th,
|
||||
.fancyTable thead tr td,
|
||||
.fancyTable tfoot tr th,
|
||||
.fancyTable tfoot tr td {
|
||||
/* appearance */
|
||||
background-color: #8ca9cf;
|
||||
|
|
|
@ -5,7 +5,9 @@ $(document).ready(function() {
|
|||
|
||||
$('.myTable02').fixedHeaderTable({ height: '250', footer: true, altClass: 'odd', themeClass: 'fancyTable' });
|
||||
|
||||
$('.myTable03').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumn: true, themeClass: 'fancyTable' });
|
||||
$('.myTable03').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' });
|
||||
|
||||
$('.myTable04').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3, themeClass: 'fancyTable' });
|
||||
|
||||
$('.myTable05').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' });
|
||||
});
|
315
demo/test.html
315
demo/test.html
|
@ -375,6 +375,319 @@ $('.myTable02').fixedHeaderTable({
|
|||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="container_12 divider">
|
||||
<div class="grid_4">
|
||||
<pre>
|
||||
<code>
|
||||
$('.myTable05').fixedHeaderTable({
|
||||
height: '400',
|
||||
altClass: 'odd',
|
||||
footer: true,
|
||||
fixedColumns: 1,
|
||||
themeClass: 'fancyTable'
|
||||
});
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="grid_4">
|
||||
<table class="myTable05" cellpadding="0" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser</th>
|
||||
<th>Visits</th>
|
||||
<th>Pages/Visit</th>
|
||||
<th>Avg. Time on Site</th>
|
||||
<th>% New Visits</th>
|
||||
<th>Bounce Rate</th>
|
||||
<th>Avg. Time on Site</th>
|
||||
<th>% New Visits</th>
|
||||
<th>Bounce Rate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Browser</th>
|
||||
<th>Visits</th>
|
||||
<th>Pages/Visit</th>
|
||||
<th>Avg. Time on Site</th>
|
||||
<th>% New Visits</th>
|
||||
<th>Bounce Rate</th>
|
||||
<th>Avg. Time on Site</th>
|
||||
<th>% New Visits</th>
|
||||
<th>Bounce Rate</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Firefox first</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22 test test test</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00% test test test</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td class="numeric">1,990</td>
|
||||
<td class="numeric">3.11</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
<td class="numeric">00:04:22</td>
|
||||
<td class="numeric">70.00%</td>
|
||||
<td class="numeric">32.61%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="container_12 divider">
|
||||
<div class="grid_4">
|
||||
<pre>
|
||||
|
@ -383,7 +696,7 @@ $('.myTable03').fixedHeaderTable({
|
|||
height: '400',
|
||||
altClass: 'odd',
|
||||
footer: true,
|
||||
fixedColumn: true,
|
||||
fixedColumns: 1,
|
||||
themeClass: 'fancyTable'
|
||||
});
|
||||
</code>
|
||||
|
|
|
@ -342,7 +342,7 @@
|
|||
'margin-left': -this.scrollLeft
|
||||
});
|
||||
|
||||
if (settings.cloneHeadToFoot) {
|
||||
if (settings.footer || settings.cloneHeadToFoot) {
|
||||
$tfoot.find('table')
|
||||
.css({
|
||||
'margin-left': -this.scrollLeft
|
||||
|
@ -397,15 +397,15 @@
|
|||
$fixedColumn = $wrapper.find('.fht-fixed-column'),
|
||||
$thead = $('<div class="fht-thead"><table class="fht-table"><thead><tr></tr></thead></table></div>'),
|
||||
$tbody = $('<div class="fht-tbody"><table class="fht-table"><tbody></tbody></table></div>'),
|
||||
$tfoot = $('<div class="fht-tfoot"><table class="fht-table"><thead><tr></tr></thead></table></div>'),
|
||||
$firstThChildren,// = $fixedBody.find('.fht-thead thead tr th:first-child'),
|
||||
$tfoot = $('<div class="fht-tfoot"><table class="fht-table"><tfoot><tr></tr></tfoot></table></div>'),
|
||||
$firstThChildren,// = $fixedBody.find('.fht-thead thead tr > *:first-child'),
|
||||
$firstTdChildren,
|
||||
fixedColumnWidth,// = $firstThChild.outerWidth(true) + tableProps.border,
|
||||
fixedBodyWidth = $wrapper.width(),
|
||||
fixedBodyHeight = $fixedBody.find('.fht-tbody').height() - settings.scrollbarOffset,
|
||||
$newRow;
|
||||
|
||||
$firstThChildren = $fixedBody.find('.fht-thead thead tr th:lt(' + settings.fixedColumns + ')');
|
||||
$firstThChildren = $fixedBody.find('.fht-thead thead tr > *:lt(' + settings.fixedColumns + ')');
|
||||
fixedColumnWidth = settings.fixedColumns * tableProps.border;
|
||||
$firstThChildren.each(function(index) {
|
||||
fixedColumnWidth += $(this).outerWidth(true);
|
||||
|
@ -420,7 +420,7 @@
|
|||
tdWidths.push($(this).width());
|
||||
});
|
||||
|
||||
firstTdChildrenSelector = 'tbody tr td:not(:nth-child(n+' + (settings.fixedColumns + 1) + '))';
|
||||
firstTdChildrenSelector = 'tbody tr > *:not(:nth-child(n+' + (settings.fixedColumns + 1) + '))';
|
||||
$firstTdChildren = $fixedBody.find(firstTdChildrenSelector)
|
||||
.each(function(index) {
|
||||
helpers._fixHeightWithCss($(this), tableProps);
|
||||
|
@ -479,14 +479,17 @@
|
|||
|
||||
// setup clone footer with fixed column
|
||||
if (settings.footer == true || settings.cloneHeadToFoot == true) {
|
||||
var $firstTdFootChild = $fixedBody.find('.fht-tfoot thead tr th:lt(' + settings.fixedColumns + ')');
|
||||
var $firstTdFootChild = $fixedBody.find('.fht-tfoot tr > *:lt(' + settings.fixedColumns + ')');
|
||||
|
||||
helpers._fixHeightWithCss($firstTdFootChild, tableProps);
|
||||
$tfoot.appendTo($fixedColumn)
|
||||
.find('tr')
|
||||
.append($firstTdFootChild.clone());
|
||||
// Set (view width) of $tfoot div to width of table (this accounts for footers with a colspan)
|
||||
footwidth = $tfoot.find('table').innerWidth();
|
||||
$tfoot.css({
|
||||
'top': settings.scrollbarOffset
|
||||
'top': settings.scrollbarOffset,
|
||||
'width': footwidth,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
@ -556,15 +559,15 @@
|
|||
|
||||
tableProp.border = ($obj.find('th:first-child').outerWidth() - $obj.find('th:first-child').innerWidth()) / borderCollapse;
|
||||
|
||||
$obj.find('thead tr:first-child th').each(function(index) {
|
||||
$obj.find('thead tr:first-child > *').each(function(index) {
|
||||
tableProp.thead[index] = $(this).width() + tableProp.border;
|
||||
});
|
||||
|
||||
$obj.find('tfoot tr:first-child td').each(function(index) {
|
||||
$obj.find('tfoot tr:first-child > *').each(function(index) {
|
||||
tableProp.tfoot[index] = $(this).width() + tableProp.border;
|
||||
});
|
||||
|
||||
$obj.find('tbody tr:first-child td').each(function(index) {
|
||||
$obj.find('tbody tr:first-child > *').each(function(index) {
|
||||
tableProp.tbody[index] = $(this).width() + tableProp.border;
|
||||
});
|
||||
|
||||
|
@ -578,10 +581,10 @@
|
|||
_setupClone: function($obj, cellArray) {
|
||||
var $self = $obj,
|
||||
selector = ($self.find('thead').length) ?
|
||||
'thead th' :
|
||||
'thead tr:first-child > *' :
|
||||
($self.find('tfoot').length) ?
|
||||
'tfoot td' :
|
||||
'tbody td',
|
||||
'tfoot tr:first-child > *' :
|
||||
'tbody tr:first-child > *',
|
||||
$cell;
|
||||
|
||||
$self.find(selector).each(function(index) {
|
||||
|
|
Loading…
Reference in New Issue