diff --git a/css/defaultTheme.css b/css/defaultTheme.css index f473c6c..1547589 100644 --- a/css/defaultTheme.css +++ b/css/defaultTheme.css @@ -89,4 +89,18 @@ z-index: 1; } +/*Rotating the titles*/ +.fht-table-wrapper th.fthrotate { + height: 140px; + white-space: nowrap; +} +.fht-table-wrapper th.fthrotate > div { + transform:rotate(90deg); + -ms-transform:rotate(90deg); /* IE 9 */ + -webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */ + width: 30px; +} +.fht-table-wrapper th.fthrotate > div > span { + padding: 5px 10px; +} /* @end */ \ No newline at end of file diff --git a/demo/css/myTheme.css b/demo/css/myTheme.css index 994efc7..3034209 100644 --- a/demo/css/myTheme.css +++ b/demo/css/myTheme.css @@ -61,7 +61,11 @@ overflow-x: auto; overflow-y: auto; } - +.height500 { + height: 500px; + 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 e2c9531..8ca24f3 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -10,4 +10,6 @@ $(document).ready(function() { $('#myTable03').fixedHeaderTable({ altClass: 'odd', footer: true, fixedColumns: 1 }); $('#myTable04').fixedHeaderTable({ altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3 }); + + $('#myTable06').fixedHeaderTable({ altClass: 'odd', footer: true, fixedColumns: 1, rotateTitles:true }); }); diff --git a/demo/test.html b/demo/test.html index f5856db..8635098 100644 --- a/demo/test.html +++ b/demo/test.html @@ -1283,5 +1283,316 @@
+
+
+ 
+                    
+$('#myTable06').fixedHeaderTable({
+    altClass: 'odd',
+    footer: true,
+    fixedColumns: 1,
+    rotateTitles:true
+});
+                    
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVisitsPages/VisitAvg. Time on Site% New VisitsBounce RateAvg. Time on Site% New VisitsBounce Rate
BrowserVisitsPages/VisitAvg. Time on Site% New VisitsBounce RateAvg. Time on Site% New VisitsBounce Rate
Firefox first1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:22 test test test70.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00% test test test32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
Firefox1,9903.1100:04:2270.00%32.61%00:04:2270.00%32.61%
+
+
+
diff --git a/jquery.fixedheadertable.js b/jquery.fixedheadertable.js index 1d052d8..29ee608 100644 --- a/jquery.fixedheadertable.js +++ b/jquery.fixedheadertable.js @@ -35,7 +35,8 @@ footer: false, // show footer cloneHeadToFoot: false, // clone head and use as footer autoResize: false, // resize table if its parent wrapper changes size - create: null // callback after plugin completes + create: null, // callback after plugin completes + rotateTitles: false //Rotate the header and footer text }; var settings = {}; @@ -48,6 +49,12 @@ // iterate through all the DOM elements we are attaching the plugin to return this.each(function () { var $self = $(this); // reference the jQuery version of the current DOM element + + //If title rotation is enabled, call _rotateTitles to add the necessary HTML + //This is to be done prior other DOM manipulations + if(settings.rotateTitles == true){ + helpers._rotateTitles($self); + } if (helpers._isTable($self)) { methods.setup.apply(this, Array.prototype.slice.call(arguments, 1)); @@ -676,10 +683,18 @@ } return scrollbarWidth; + }, + + /* + * Set the necessary HTML for rotating the contents of th in thead and tfoot + * Courtesy: http://css-tricks.com/rotated-table-column-headers/ + */ + _rotateTitles: function($table) { + $table.find('thead tr th, tfoot tr th').each(function () { + $(this).wrapInner('
').addClass('fthrotate'); + }); } - - }; - + }; // if a method as the given argument exists if (methods[method]) { diff --git a/jquery.fixedheadertable.min.js b/jquery.fixedheadertable.min.js index 6c8a9ef..69936d8 100644 --- a/jquery.fixedheadertable.min.js +++ b/jquery.fixedheadertable.min.js @@ -16,5 +16,4 @@ * * * all CSS sizing (width,height) is done in pixels (px) - */(function(c){c.fn.fixedHeaderTable=function(m){var u={width:"100%",height:"100%",themeClass:"fht-default",borderCollapse:!0,fixedColumns:0,fixedColumn:!1,sortable:!1,autoShow:!0,footer:!1,cloneHeadToFoot:!1,autoResize:!1,create:null},b={},n={init:function(a){b=c.extend({},u,a);return this.each(function(){var a=c(this);h._isTable(a)?(n.setup.apply(this,Array.prototype.slice.call(arguments,1)),c.isFunction(b.create)&&b.create.call(this)):c.error("Invalid table mark-up")})},setup:function(){var a=c(this), d=a.find("thead"),e=a.find("tfoot"),g=0,f,k,p;b.originalTable=c(this).clone();b.includePadding=h._isPaddingIncludedWithWidth();b.scrollbarOffset=h._getScrollbarWidth();b.themeClassName=b.themeClass;f=-1'));f=a.closest(".fht-table-wrapper");!0==b.fixedColumn&&0>=b.fixedColumns&&(b.fixedColumns= 1);0'),c('
').prependTo(f),k=f.find(".fht-fixed-body"));f.css({width:b.width,height:b.height}).addClass(b.themeClassName);a.hasClass("fht-table-init")||a.wrap('
');p=a.closest(".fht-tbody");var l=h._getTableProps(a);h._setupClone(p,l.tbody);a.hasClass("fht-table-init")?k=f.find("div.fht-thead"):(k=0
').prependTo(k): c('
').prependTo(f),k.find("table.fht-table").addClass(b.originalTable.attr("class")).attr("style",b.originalTable.attr("style")),d.clone().appendTo(k.find("table")));h._setupClone(k,l.thead);a.css({"margin-top":-k.outerHeight(!0)});!0==b.footer&&(h._setupTableFooter(a,this,l),e.length||(e=f.find("div.fht-tfoot table")),g=e.outerHeight(!0));d=f.height()-d.outerHeight(!0)-g-l.border;p.css({height:d});a.addClass("fht-table-init");"undefined"!== typeof b.altClass&&n.altRows.apply(this);0
'),p=c('
');a=c('
'); var g=g.width(),l=f.find(".fht-tbody").height()-b.scrollbarOffset,q,t,r,s;k.find("table.fht-table").addClass(b.originalTable.attr("class"));p.find("table.fht-table").addClass(b.originalTable.attr("class"));a.find("table.fht-table").addClass(b.originalTable.attr("class"));q=f.find(".fht-thead thead tr > *:lt("+b.fixedColumns+")");r=b.fixedColumns*e.border;q.each(function(){r+=c(this).outerWidth(!0)});h._fixHeightWithCss(q,e);h._fixWidthWithCss(q,e);var m=[];q.each(function(){m.push(c(this).width())}); t=f.find("tbody tr > *:not(:nth-child(n+"+(b.fixedColumns+1)+"))").each(function(a){h._fixHeightWithCss(c(this),e);h._fixWidthWithCss(c(this),e,m[a%b.fixedColumns])});k.appendTo(d).find("tr").append(q.clone());p.appendTo(d).css({"margin-top":-1,height:l+e.border});t.each(function(a){0==a%b.fixedColumns&&(s=c("").appendTo(p.find("tbody")),b.altClass&&c(this).parent().hasClass(b.altClass)&&s.addClass(b.altClass));c(this).clone().appendTo(s)});d.css({height:0,width:r});var n=d.find(".fht-tbody .fht-table").height()- d.find(".fht-tbody").height();d.find(".fht-tbody .fht-table").bind("mousewheel",function(a,d,b,e){if(0!=e)return a=parseInt(c(this).css("marginTop"),10)+(0 *:lt("+b.fixedColumns+")"),h._fixHeightWithCss(k,e),a.appendTo(d).find("tr").append(k.clone()),d=a.find("table").innerWidth(),a.css({top:b.scrollbarOffset, width:d})},_setupTableFooter:function(a,d,e){d=a.closest(".fht-table-wrapper");var g=a.find("tfoot");a=d.find("div.fht-tfoot");a.length||(a=0
').appendTo(d.find(".fht-fixed-body")):c('
').appendTo(d));a.find("table.fht-table").addClass(b.originalTable.attr("class"));switch(!0){case !g.length&&!0==b.cloneHeadToFoot&&!0==b.footer:e=d.find("div.fht-thead");a.empty(); e.find("table").clone().appendTo(a);break;case g.length&&!1==b.cloneHeadToFoot&&!0==b.footer:a.find("table").append(g).css({"margin-top":-e.border}),h._setupClone(a,e.tfoot)}},_getTableProps:function(a){var d={thead:{},tbody:{},tfoot:{},border:0},c=1;!0==b.borderCollapse&&(c=2);d.border=(a.find("th:first-child").outerWidth()-a.find("th:first-child").innerWidth())/c;d.thead=h._getColumnsWidth(a.find("thead tr"));d.tfoot=h._getColumnsWidth(a.find("tfoot tr"));d.tbody=h._getColumnsWidth(a.find("tbody tr")); return d},_getColumnsWidth:function(a){var d={},b={},g=0,f,k;f=h._getColumnsCount(a);for(k=0;k').appendTo(c(this))).css({width:parseInt(d[a].width,10)}),c(this).closest(".fht-tbody").length||!c(this).is(":last-child")||c(this).closest(".fht-fixed-column").length|| (a=Math.max((c(this).innerWidth()-c(this).width())/2,b.scrollbarOffset),c(this).css({"padding-right":parseInt(c(this).css("padding-right"))+a+"px"})))})})},_isPaddingIncludedWithWidth:function(){var a=c('
test
'),d,e;a.addClass(b.originalTable.attr("class"));a.appendTo("body");d=a.find("td").height();a.find("td").css("height",a.find("tr").height());e=a.find("td").height();a.remove();return d!=e?!0:!1},_getScrollbarWidth:function(){var a= 0;if(!a)if(/msie/.test(navigator.userAgent.toLowerCase())){var b=c('').css({position:"absolute",top:-1E3,left:-1E3}).appendTo("body"),e=c('').css({position:"absolute",top:-1E3,left:-1E3}).appendTo("body"),a=b.width()-e.width()+2;b.add(e).remove()}else b=c("
").css({width:100,height:100,overflow:"auto",position:"absolute",top:-1E3,left:-1E3}).prependTo("body").append("
").find("div").css({width:"100%", height:200}),a=100-b.width(),b.parent().remove();return a}};if(n[m])return n[m].apply(this,Array.prototype.slice.call(arguments,1));if("object"!==typeof m&&m)c.error('Method "'+m+'" does not exist in fixedHeaderTable plugin!');else return n.init.apply(this,arguments)}})(jQuery); - + */!function(t){t.fn.fixedHeaderTable=function(e){var i={width:"100%",height:"100%",themeClass:"fht-default",borderCollapse:!0,fixedColumns:0,fixedColumn:!1,sortable:!1,autoShow:!0,footer:!1,cloneHeadToFoot:!1,autoResize:!1,create:null,rotateTitles:!1},s={},d={init:function(e){return s=t.extend({},i,e),this.each(function(){var e=t(this);1==s.rotateTitles&&o._rotateTitles(e),o._isTable(e)?(d.setup.apply(this,Array.prototype.slice.call(arguments,1)),t.isFunction(s.create)&&s.create.call(this)):t.error("Invalid table mark-up")})},setup:function(){var e,i,a,n,l,h=t(this),f=this,r=h.find("thead"),c=h.find("tfoot"),b=0;s.originalTable=t(this).clone(),s.includePadding=o._isPaddingIncludedWithWidth(),s.scrollbarOffset=o._getScrollbarWidth(),s.themeClassName=s.themeClass,l=s.width.search("%")>-1?h.parent().width()-s.scrollbarOffset:s.width-s.scrollbarOffset,h.css({width:l}),h.closest(".fht-table-wrapper").length||(h.addClass("fht-table"),h.wrap('
')),e=h.closest(".fht-table-wrapper"),1==s.fixedColumn&&s.fixedColumns<=0&&(s.fixedColumns=1),s.fixedColumns>0&&0==e.find(".fht-fixed-column").length&&(h.wrap('
'),t('
').prependTo(e),n=e.find(".fht-fixed-body")),e.css({width:s.width,height:s.height}).addClass(s.themeClassName),h.hasClass("fht-table-init")||h.wrap('
'),a=h.closest(".fht-tbody");var p=o._getTableProps(h);o._setupClone(a,p.tbody),h.hasClass("fht-table-init")?i=e.find("div.fht-thead"):(i=t('
').prependTo(s.fixedColumns>0?n:e),i.find("table.fht-table").addClass(s.originalTable.attr("class")).attr("style",s.originalTable.attr("style")),r.clone().appendTo(i.find("table"))),o._setupClone(i,p.thead),h.css({"margin-top":-i.outerHeight(!0)}),1==s.footer&&(o._setupTableFooter(h,f,p),c.length||(c=e.find("div.fht-tfoot table")),b=c.outerHeight(!0));var u=e.height()-r.outerHeight(!0)-b-p.border;return a.css({height:u}),h.addClass("fht-table-init"),"undefined"!=typeof s.altClass&&d.altRows.apply(f),s.fixedColumns>0&&o._setupFixedColumn(h,f,p),s.autoShow||e.hide(),o._bindScroll(a,p),f},resize:function(){var t=this;return t},altRows:function(e){var i=t(this),d="undefined"!=typeof e?e:s.altClass;i.closest(".fht-table-wrapper").find("tbody tr:odd:not(:hidden)").addClass(d)},show:function(e,i,s){var d=t(this),o=this,a=d.closest(".fht-table-wrapper");return"undefined"!=typeof e&&"number"==typeof e?(a.show(e,function(){t.isFunction(i)&&i.call(this)}),o):"undefined"!=typeof e&&"string"==typeof e&&"undefined"!=typeof i&&"number"==typeof i?(a.show(e,i,function(){t.isFunction(s)&&s.call(this)}),o):(d.closest(".fht-table-wrapper").show(),t.isFunction(e)&&e.call(this),o)},hide:function(e,i,s){var d=t(this),o=this,a=d.closest(".fht-table-wrapper");return"undefined"!=typeof e&&"number"==typeof e?(a.hide(e,function(){t.isFunction(s)&&s.call(this)}),o):"undefined"!=typeof e&&"string"==typeof e&&"undefined"!=typeof i&&"number"==typeof i?(a.hide(e,i,function(){t.isFunction(s)&&s.call(this)}),o):(d.closest(".fht-table-wrapper").hide(),t.isFunction(s)&&s.call(this),o)},destroy:function(){var e=t(this),i=this,s=e.closest(".fht-table-wrapper");return e.insertBefore(s).removeAttr("style").append(s.find("tfoot")).removeClass("fht-table fht-table-init").find(".fht-cell").remove(),s.remove(),i}},o={_isTable:function(t){var e=t,i=e.is("table"),s=e.find("thead").length>0,d=e.find("tbody").length>0;return i&&s&&d?!0:!1},_bindScroll:function(t){var e=t,i=e.closest(".fht-table-wrapper"),d=e.siblings(".fht-thead"),o=e.siblings(".fht-tfoot");e.bind("scroll",function(){if(s.fixedColumns>0){var t=i.find(".fht-fixed-column");t.find(".fht-tbody table").css({"margin-top":-e.scrollTop()})}d.find("table").css({"margin-left":-this.scrollLeft}),(s.footer||s.cloneHeadToFoot)&&o.find("table").css({"margin-left":-this.scrollLeft})})},_fixHeightWithCss:function(t,e){t.css(s.includePadding?{height:t.height()+e.border}:{height:t.parent().height()+e.border})},_fixWidthWithCss:function(e,i,d){e.each(s.includePadding?function(){t(this).css({width:void 0==d?t(this).width()+i.border:d+i.border})}:function(){t(this).css({width:void 0==d?t(this).parent().width()+i.border:d+i.border})})},_setupFixedColumn:function(e,i,d){var a,n,l,h,f,r=e,c=r.closest(".fht-table-wrapper"),b=c.find(".fht-fixed-body"),p=c.find(".fht-fixed-column"),u=t('
'),g=t('
'),v=t('
'),y=c.width(),w=b.find(".fht-tbody").height()-s.scrollbarOffset;u.find("table.fht-table").addClass(s.originalTable.attr("class")),g.find("table.fht-table").addClass(s.originalTable.attr("class")),v.find("table.fht-table").addClass(s.originalTable.attr("class")),a=b.find(".fht-thead thead tr > *:lt("+s.fixedColumns+")"),l=s.fixedColumns*d.border,a.each(function(){l+=t(this).outerWidth(!0)}),o._fixHeightWithCss(a,d),o._fixWidthWithCss(a,d);var C=[];a.each(function(){C.push(t(this).width())}),f="tbody tr > *:not(:nth-child(n+"+(s.fixedColumns+1)+"))",n=b.find(f).each(function(e){o._fixHeightWithCss(t(this),d),o._fixWidthWithCss(t(this),d,C[e%s.fixedColumns])}),u.appendTo(p).find("tr").append(a.clone()),g.appendTo(p).css({"margin-top":-1,height:w+d.border}),n.each(function(e){e%s.fixedColumns==0&&(h=t("").appendTo(g.find("tbody")),s.altClass&&t(this).parent().hasClass(s.altClass)&&h.addClass(s.altClass)),t(this).clone().appendTo(h)}),p.css({height:0,width:l});var m=p.find(".fht-tbody .fht-table").height()-p.find(".fht-tbody").height();if(p.find(".fht-tbody .fht-table").bind("mousewheel",function(e,i,s,d){if(0!=d){var o=parseInt(t(this).css("marginTop"),10)+(d>0?120:-120);return o>0&&(o=0),-m>o&&(o=-m),t(this).css("marginTop",o),b.find(".fht-tbody").scrollTop(-o).scroll(),!1}}),b.css({width:y}),1==s.footer||1==s.cloneHeadToFoot){var x,T=b.find(".fht-tfoot tr > *:lt("+s.fixedColumns+")");o._fixHeightWithCss(T,d),v.appendTo(p).find("tr").append(T.clone()),x=v.find("table").innerWidth(),v.css({top:s.scrollbarOffset,width:x})}},_setupTableFooter:function(e,i,d){var a=e,n=a.closest(".fht-table-wrapper"),l=a.find("tfoot"),h=n.find("div.fht-tfoot");switch(h.length||(h=t('
').appendTo(s.fixedColumns>0?n.find(".fht-fixed-body"):n)),h.find("table.fht-table").addClass(s.originalTable.attr("class")),!0){case!l.length&&1==s.cloneHeadToFoot&&1==s.footer:var f=n.find("div.fht-thead");h.empty(),f.find("table").clone().appendTo(h);break;case l.length&&0==s.cloneHeadToFoot&&1==s.footer:h.find("table").append(l).css({"margin-top":-d.border}),o._setupClone(h,d.tfoot)}},_getTableProps:function(e){var i={thead:{},tbody:{},tfoot:{},border:0},d=1;return 1==s.borderCollapse&&(d=2),i.border=(e.find("th:first-child").outerWidth()-e.find("th:first-child").innerWidth())/d,e.find("thead tr:first-child > *").each(function(e){i.thead[e]=t(this).width()+i.border}),e.find("tfoot tr:first-child > *").each(function(e){i.tfoot[e]=t(this).width()+i.border}),e.find("tbody tr:first-child > *").each(function(e){i.tbody[e]=t(this).width()+i.border}),i},_setupClone:function(e,i){var d,o=e,a=o.find("thead").length?"thead tr:first-child > *":o.find("tfoot").length?"tfoot tr:first-child > *":"tbody tr:first-child > *";o.find(a).each(function(e){if(d=t(this).find("div.fht-cell").length?t(this).find("div.fht-cell"):t('
').appendTo(t(this)),d.css({width:parseInt(i[e],10)}),!t(this).closest(".fht-tbody").length&&t(this).is(":last-child")&&!t(this).closest(".fht-fixed-column").length){var o=Math.max((t(this).innerWidth()-t(this).width())/2,s.scrollbarOffset);t(this).css({"padding-right":parseInt(t(this).css("padding-right"))+o+"px"})}})},_isPaddingIncludedWithWidth:function(){var e,i,d=t('
test
');return d.addClass(s.originalTable.attr("class")),d.appendTo("body"),e=d.find("td").height(),d.find("td").css("height",d.find("tr").height()),i=d.find("td").height(),d.remove(),e!=i?!0:!1},_getScrollbarWidth:function(){var e=0;if(!e)if(/msie/.test(navigator.userAgent.toLowerCase())){var i=t('').css({position:"absolute",top:-1e3,left:-1e3}).appendTo("body"),s=t('').css({position:"absolute",top:-1e3,left:-1e3}).appendTo("body");e=i.width()-s.width()+2,i.add(s).remove()}else{var d=t("
").css({width:100,height:100,overflow:"auto",position:"absolute",top:-1e3,left:-1e3}).prependTo("body").append("
").find("div").css({width:"100%",height:200});e=100-d.width(),d.parent().remove()}return e},_rotateTitles:function(e){e.find("thead tr th, tfoot tr th").each(function(){t(this).wrapInner("
").addClass("fthrotate")})}};return d[e]?d[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error('Method "'+e+'" does not exist in fixedHeaderTable plugin!'):d.init.apply(this,arguments)}}(jQuery); \ No newline at end of file