From 8ac7bc7c413e3602536ead84c5b4a7627dbf8f03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Camblor?= Date: Sun, 26 Feb 2012 02:58:40 +0100 Subject: [PATCH 1/3] Fixing bug when footer is true and cloneHeadToFoot is not : scrolling was not working on footer nor footer fixedColumn --- jquery.fixedheadertable.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/jquery.fixedheadertable.js b/jquery.fixedheadertable.js index aed7e15..ea8d068 100644 --- a/jquery.fixedheadertable.js +++ b/jquery.fixedheadertable.js @@ -352,7 +352,7 @@ 'margin-left': -this.scrollLeft }); - if ( settings.cloneHeadToFoot ) { + if (settings.footer || settings.cloneHeadToFoot ) { $tfoot.find('table') .css({ 'margin-left': -this.scrollLeft @@ -402,7 +402,7 @@ $fixedColumn = $wrapper.find('.fht-fixed-column'), $thead = $('
'), $tbody = $('
'), - $tfoot = $('
'), + $tfoot = $('
'), $firstThChild = $fixedBody.find('.fht-thead thead tr th:first-child'), $firstTdChildren, fixedColumnWidth = $firstThChild.outerWidth(true) + tableProps.border, @@ -452,8 +452,13 @@ // setup clone footer with fixed column if ( settings.footer == true || settings.cloneHeadToFoot == true ) { - var $firstTdFootChild = $fixedBody.find('.fht-tfoot thead tr th:first-child'); - + var $firstTdFootChild; + if(settings.cloneHeadToFoot){ + $firstTdFootChild = $fixedBody.find('.fht-thead thead tr th:first-child'); + } else { + $firstTdFootChild = $fixedBody.find('.fht-tfoot tfoot tr td:first-child'); + } + helpers._fixHeightWithCss( $firstTdFootChild, tableProps ); $tfoot.appendTo($fixedColumn) .find('tr') From fbbf58cb707281818312a538458cad83e7a2f169 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Camblor?= Date: Sun, 26 Feb 2012 03:00:45 +0100 Subject: [PATCH 2/3] Original classes are not overridden anymore --- jquery.fixedheadertable.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/jquery.fixedheadertable.js b/jquery.fixedheadertable.js index ea8d068..e8a0143 100644 --- a/jquery.fixedheadertable.js +++ b/jquery.fixedheadertable.js @@ -84,7 +84,8 @@ $fixedHeadRow, $temp, tfootHeight = 0; - + + settings.originalTable = $(this).clone(); settings.includePadding = helpers._isPaddingIncludedWithWidth(); settings.scrollbarOffset = helpers._getScrollbarWidth(); settings.themeClassName = settings.themeClass; @@ -137,6 +138,8 @@ } else { $divHead = $('
').prependTo($wrapper); } + + $divHead.find('table.fht-table').addClass(settings.originalTable.attr('class')); $thead.clone().appendTo($divHead.find('table')); } else { @@ -409,7 +412,11 @@ fixedBodyWidth = $wrapper.width(), fixedBodyHeight = $fixedBody.find('.fht-tbody').height() - settings.scrollbarOffset, $newRow; - + + $thead.find('table.fht-table').addClass(settings.originalTable.attr('class')); + $tbody.find('table.fht-table').addClass(settings.originalTable.attr('class')); + $tfoot.find('table.fht-table').addClass(settings.originalTable.attr('class')); + // Fix cell heights helpers._fixHeightWithCss( $firstThChild, tableProps ); helpers._fixWidthWithCss( $firstThChild, tableProps ); @@ -486,6 +493,8 @@ } else { $divFoot = $('
').appendTo($wrapper); } + + $divFoot.find('table.fht-table').addClass(settings.originalTable.attr('class')); } switch (true) { @@ -592,6 +601,8 @@ var $obj = $('
test
'), defaultHeight, newHeight; + + $obj.addClass(settings.originalTable.attr('class')); $obj.appendTo('body'); From b1499904746ab8b3ec9c6c5431b1c69c72074e24 Mon Sep 17 00:00:00 2001 From: Freek Dijkstra Date: Mon, 27 Feb 2012 17:12:08 +0100 Subject: [PATCH 3/3] Move themeClass and height from JavaScript to HTML. This makes the configuration easier and gives much better backward compatibility if JavaScript is turned off. --- demo/css/myTheme.css | 12 ++++++++++++ demo/demo.js | 14 +++++++------- demo/test.html | 40 +++++++++++++++------------------------- 3 files changed, 34 insertions(+), 32 deletions(-) diff --git a/demo/css/myTheme.css b/demo/css/myTheme.css index 83cd7fe..994efc7 100644 --- a/demo/css/myTheme.css +++ b/demo/css/myTheme.css @@ -50,6 +50,18 @@ height: 500px; } +.height250 { + height: 250px; + overflow-x: auto; + overflow-y: auto; +} + +.height400 { + height: 400px; + overflow-x: auto; + overflow-y: auto; +} + .fancyTable td, .fancyTable th { /* appearance */ border: 1px solid #778899; diff --git a/demo/demo.js b/demo/demo.js index 45f27a0..e2c9531 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -1,13 +1,13 @@ $(document).ready(function() { - $('.myTable01').fixedHeaderTable({ height: '250', footer: true, cloneHeadToFoot: true, altClass: 'odd', themeClass: 'fancyTable', autoShow: false }); + $('#myTable01').fixedHeaderTable({ footer: true, cloneHeadToFoot: true, altClass: 'odd', autoShow: false }); - $('.myTable01').fixedHeaderTable('show', 1000); + $('#myTable01').fixedHeaderTable('show', 1000); - $('.myTable02').fixedHeaderTable({ height: '250', footer: true, altClass: 'odd', themeClass: 'fancyTable' }); + $('#myTable02').fixedHeaderTable({ footer: true, altClass: 'odd' }); - $('.myTable03').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' }); + $('#myTable05').fixedHeaderTable({ altClass: 'odd', footer: true, fixedColumns: 1 }); - $('.myTable04').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3, themeClass: 'fancyTable' }); + $('#myTable03').fixedHeaderTable({ altClass: 'odd', footer: true, fixedColumns: 1 }); - $('.myTable05').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' }); -}); \ No newline at end of file + $('#myTable04').fixedHeaderTable({ altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3 }); +}); diff --git a/demo/test.html b/demo/test.html index 27ee8bc..f5856db 100644 --- a/demo/test.html +++ b/demo/test.html @@ -15,19 +15,17 @@ 
     				
-$('.myTable01').fixedHeaderTable({ 
-	height: '250',
+$('#myTable01').fixedHeaderTable({ 
 	footer: true,
 	cloneHeadToFoot: true,
 	altClass: 'odd',
-	themeClass: 'fancyTable',
 	autoShow: false
 });
-
- +
+
@@ -177,17 +175,15 @@ $('.myTable01').fixedHeaderTable({ 
         		    				
-$('.myTable02').fixedHeaderTable({
-	height: '250',
+$('#myTable02').fixedHeaderTable({
 	footer: true,
 	altClass: 'odd',
-	themeClass: 'fancyDarkTable'
 });
-
-
Browser
+
+
@@ -379,18 +375,16 @@ $('.myTable02').fixedHeaderTable({ 
         			
-$('.myTable05').fixedHeaderTable({
-	height: '400',
+$('#myTable05').fixedHeaderTable({
 	altClass: 'odd',
 	footer: true,
 	fixedColumns: 1,
-	themeClass: 'fancyTable'
 });
-
-
Browser
+
+
@@ -692,18 +686,16 @@ $('.myTable05').fixedHeaderTable({ 
         			
-$('.myTable03').fixedHeaderTable({
-	height: '400',
+$('#myTable03').fixedHeaderTable({
 	altClass: 'odd',
 	footer: true,
 	fixedColumns: 1,
-	themeClass: 'fancyTable'
 });
-
-
Browser
+
+
@@ -997,19 +989,17 @@ $('.myTable03').fixedHeaderTable({ 
         			
-$('.myTable04').fixedHeaderTable({
-	height: '400',
+$('#myTable04').fixedHeaderTable({
 	altClass: 'odd',
 	footer: true,
 	cloneHeadToFoot: true,
 	fixedColumn: 3,
-	themeClass: 'fancyTable'
 });
-
-
Browser
+
+
Browser