From 2a249b4ebdf49a6db458d87a54fdac8a08ff9565 Mon Sep 17 00:00:00 2001 From: Rob Garrison Date: Tue, 26 Jul 2016 02:46:32 -0500 Subject: [PATCH] StickyHeaders: add appendTo option --- dist/js/widgets/widget-stickyHeaders.min.js | 2 +- docs/index.html | 36 ++++++++++++++++++--- js/widgets/widget-stickyHeaders.js | 13 +++++--- 3 files changed, 42 insertions(+), 9 deletions(-) diff --git a/dist/js/widgets/widget-stickyHeaders.min.js b/dist/js/widgets/widget-stickyHeaders.min.js index a4604bfc..cec41dd1 100644 --- a/dist/js/widgets/widget-stickyHeaders.min.js +++ b/dist/js/widgets/widget-stickyHeaders.min.js @@ -1,2 +1,2 @@ /*! Widget: stickyHeaders - updated 5/1/2016 (v2.26.0) */ -!function(a,b){"use strict";var c=a.tablesorter||{};a.extend(c.css,{sticky:"tablesorter-stickyHeader",stickyVis:"tablesorter-sticky-visible",stickyHide:"tablesorter-sticky-hidden",stickyWrap:"tablesorter-sticky-wrapper"}),c.addHeaderResizeEvent=function(b,c,d){if(b=a(b)[0],b.config){var e={timer:250},f=a.extend({},e,d),g=b.config,h=g.widgetOptions,i=function(a){var b,c,d,e,f,i,j=g.$headers.length;for(h.resize_flag=!0,c=[],b=0;j>b;b++)d=g.$headers.eq(b),e=d.data("savedSizes")||[0,0],f=d[0].offsetWidth,i=d[0].offsetHeight,f===e[0]&&i===e[1]||(d.data("savedSizes",[f,i]),c.push(d[0]));c.length&&a!==!1&&g.$table.triggerHandler("resize",[c]),h.resize_flag=!1};if(clearInterval(h.resize_timer),c)return h.resize_flag=!1,!1;i(!1),h.resize_timer=setInterval(function(){h.resize_flag||i()},f.timer)}},c.addWidget({id:"stickyHeaders",priority:60,options:{stickyHeaders:"",stickyHeaders_attachTo:null,stickyHeaders_xScroll:null,stickyHeaders_yScroll:null,stickyHeaders_offset:0,stickyHeaders_filteredToTop:!0,stickyHeaders_cloneId:"-sticky",stickyHeaders_addResizeEvent:!0,stickyHeaders_includeCaption:!0,stickyHeaders_zIndex:2},format:function(d,e,f){if(!(e.$table.hasClass("hasStickyHeaders")||a.inArray("filter",e.widgets)>=0&&!e.$table.hasClass("hasFilters"))){var g,h,i,j,k=e.$table,l=a(f.stickyHeaders_attachTo),m=e.namespace+"stickyheaders ",n=a(f.stickyHeaders_yScroll||f.stickyHeaders_attachTo||b),o=a(f.stickyHeaders_xScroll||f.stickyHeaders_attachTo||b),p=k.children("thead:first"),q=p.children("tr").not(".sticky-false").children(),r=k.children("tfoot"),s=isNaN(f.stickyHeaders_offset)?a(f.stickyHeaders_offset):"",t=s.length?s.height()||0:parseInt(f.stickyHeaders_offset,10)||0,u=k.parent().closest("."+c.css.table).hasClass("hasStickyHeaders")?k.parent().closest("table.tablesorter")[0].config.widgetOptions.$sticky.parent():[],v=u.length?u.height():0,w=f.$sticky=k.clone().addClass("containsStickyHeaders "+c.css.sticky+" "+f.stickyHeaders+" "+e.namespace.slice(1)+"_extra_table").wrap('
'),x=w.parent().addClass(c.css.stickyHide).css({position:l.length?"absolute":"fixed",padding:parseInt(w.parent().parent().css("padding-left"),10),top:t+v,left:0,visibility:"hidden",zIndex:f.stickyHeaders_zIndex||2}),y=w.children("thead:first"),z="",A=0,B=function(a,c){var d,e,f,g,h,i=a.filter(":visible"),j=i.length;for(d=0;j>d;d++)g=c.filter(":visible").eq(d),h=i.eq(d),"border-box"===h.css("box-sizing")?e=h.outerWidth():"collapse"===g.css("border-collapse")?b.getComputedStyle?e=parseFloat(b.getComputedStyle(h[0],null).width):(f=parseFloat(h.css("border-width")),e=h.outerWidth()-parseFloat(h.css("padding-left"))-parseFloat(h.css("padding-right"))-f):e=h.width(),g.css({width:e,"min-width":e,"max-width":e})},C=function(){t=s.length?s.height()||0:parseInt(f.stickyHeaders_offset,10)||0,A=0,x.css({left:l.length?parseInt(l.css("padding-left"),10)||0:k.offset().left-parseInt(k.css("margin-left"),10)-o.scrollLeft()-A,width:k.outerWidth()}),B(k,w),B(q,j)},D=function(b){if(k.is(":visible")){v=u.length?u.offset().top-n.scrollTop()+u.height():0;var d=k.offset(),e=a.isWindow(n[0]),g=a.isWindow(o[0]),h=l.length?e?n.scrollTop():n.offset().top:n.scrollTop(),i=f.stickyHeaders_includeCaption?0:k.children("caption").height()||0,j=h+t+v-i,m=k.height()-(x.height()+(r.height()||0))-i,p=j>d.top&&jg;g++)e.onRenderHeader.apply(i.eq(g),[g,e,w]);o.add(n).unbind("scroll resize ".split(" ").join(m).replace(/\s+/g," ")).bind("scroll resize ".split(" ").join(m),function(a){D("resize"===a.type)}),e.$table.unbind("stickyHeadersUpdate"+m).bind("stickyHeadersUpdate"+m,function(){D(!0)}),f.stickyHeaders_addResizeEvent&&c.addHeaderResizeEvent(d),k.hasClass("hasFilters")&&f.filter_columnFilters&&(k.bind("filterEnd"+m,function(){var d=a(document.activeElement).closest("td"),g=d.parent().children().index(d);x.hasClass(c.css.stickyVis)&&f.stickyHeaders_filteredToTop&&(b.scrollTo(0,k.position().top),g>=0&&e.$filters&&e.$filters.eq(g).find("a, select, input").filter(":visible").focus())}),c.filter.bindSearch(k,j.find("."+c.css.filter)),f.filter_hideFilters&&c.filter.hideFilters(e,w)),f.stickyHeaders_addResizeEvent&&k.bind("resize"+e.namespace+"stickyheaders",function(){C()}),k.triggerHandler("stickyHeadersInit")}},remove:function(d,e,f){var g=e.namespace+"stickyheaders ";e.$table.removeClass("hasStickyHeaders").unbind("pagerComplete resize filterEnd stickyHeadersUpdate ".split(" ").join(g).replace(/\s+/g," ")).next("."+c.css.stickyWrap).remove(),f.$sticky&&f.$sticky.length&&f.$sticky.remove(),a(b).add(f.stickyHeaders_xScroll).add(f.stickyHeaders_yScroll).add(f.stickyHeaders_attachTo).unbind("scroll resize ".split(" ").join(g).replace(/\s+/g," ")),c.addHeaderResizeEvent(d,!0)}})}(jQuery,window); \ No newline at end of file +!function(a,b){"use strict";var c=a.tablesorter||{};a.extend(c.css,{sticky:"tablesorter-stickyHeader",stickyVis:"tablesorter-sticky-visible",stickyHide:"tablesorter-sticky-hidden",stickyWrap:"tablesorter-sticky-wrapper"}),c.addHeaderResizeEvent=function(b,c,d){if(b=a(b)[0],b.config){var e={timer:250},f=a.extend({},e,d),g=b.config,h=g.widgetOptions,i=function(a){var b,c,d,e,f,i,j=g.$headers.length;for(h.resize_flag=!0,c=[],b=0;j>b;b++)d=g.$headers.eq(b),e=d.data("savedSizes")||[0,0],f=d[0].offsetWidth,i=d[0].offsetHeight,f===e[0]&&i===e[1]||(d.data("savedSizes",[f,i]),c.push(d[0]));c.length&&a!==!1&&g.$table.triggerHandler("resize",[c]),h.resize_flag=!1};if(clearInterval(h.resize_timer),c)return h.resize_flag=!1,!1;i(!1),h.resize_timer=setInterval(function(){h.resize_flag||i()},f.timer)}},c.addWidget({id:"stickyHeaders",priority:55,options:{stickyHeaders:"",stickyHeaders_appendTo:null,stickyHeaders_attachTo:null,stickyHeaders_xScroll:null,stickyHeaders_yScroll:null,stickyHeaders_offset:0,stickyHeaders_filteredToTop:!0,stickyHeaders_cloneId:"-sticky",stickyHeaders_addResizeEvent:!0,stickyHeaders_includeCaption:!0,stickyHeaders_zIndex:2},format:function(d,e,f){if(!(e.$table.hasClass("hasStickyHeaders")||a.inArray("filter",e.widgets)>=0&&!e.$table.hasClass("hasFilters"))){var g,h,i,j,k=e.$table,l=a(f.stickyHeaders_attachTo),m=e.namespace+"stickyheaders ",n=a(f.stickyHeaders_yScroll||f.stickyHeaders_attachTo||b),o=a(f.stickyHeaders_xScroll||f.stickyHeaders_attachTo||b),p=k.children("thead:first"),q=p.children("tr").not(".sticky-false").children(),r=k.children("tfoot"),s=isNaN(f.stickyHeaders_offset)?a(f.stickyHeaders_offset):"",t=s.length?s.height()||0:parseInt(f.stickyHeaders_offset,10)||0,u=k.parent().closest("."+c.css.table).hasClass("hasStickyHeaders")?k.parent().closest("table.tablesorter")[0].config.widgetOptions.$sticky.parent():[],v=u.length?u.height():0,w=f.$sticky=k.clone().addClass("containsStickyHeaders "+c.css.sticky+" "+f.stickyHeaders+" "+e.namespace.slice(1)+"_extra_table").wrap('
'),x=w.parent().addClass(c.css.stickyHide).css({position:l.length?"absolute":"fixed",padding:parseInt(w.parent().parent().css("padding-left"),10),top:t+v,left:0,visibility:"hidden",zIndex:f.stickyHeaders_zIndex||2}),y=w.children("thead:first"),z="",A=0,B=function(a,c){var d,e,f,g,h,i=a.filter(":visible"),j=i.length;for(d=0;j>d;d++)g=c.filter(":visible").eq(d),h=i.eq(d),"border-box"===h.css("box-sizing")?e=h.outerWidth():"collapse"===g.css("border-collapse")?b.getComputedStyle?e=parseFloat(b.getComputedStyle(h[0],null).width):(f=parseFloat(h.css("border-width")),e=h.outerWidth()-parseFloat(h.css("padding-left"))-parseFloat(h.css("padding-right"))-f):e=h.width(),g.css({width:e,"min-width":e,"max-width":e})},C=function(){t=s.length?s.height()||0:parseInt(f.stickyHeaders_offset,10)||0,A=0,x.css({left:l.length?parseInt(l.css("padding-left"),10)||0:k.offset().left-parseInt(k.css("margin-left"),10)-o.scrollLeft()-A,width:k.outerWidth()}),B(k,w),B(q,j)},D=function(b){if(k.is(":visible")){v=u.length?u.offset().top-n.scrollTop()+u.height():0;var d=k.offset(),e=a.isWindow(n[0]),g=a.isWindow(o[0]),h=l.length?e?n.scrollTop():n.offset().top:n.scrollTop(),i=f.stickyHeaders_includeCaption?0:k.children("caption").height()||0,j=h+t+v-i,m=k.height()-(x.height()+(r.height()||0))-i,p=j>d.top&&jg;g++)e.onRenderHeader.apply(i.eq(g),[g,e,w]);o.add(n).unbind("scroll resize ".split(" ").join(m).replace(/\s+/g," ")).bind("scroll resize ".split(" ").join(m),function(a){D("resize"===a.type)}),e.$table.unbind("stickyHeadersUpdate"+m).bind("stickyHeadersUpdate"+m,function(){D(!0)}),f.stickyHeaders_addResizeEvent&&c.addHeaderResizeEvent(d),k.hasClass("hasFilters")&&f.filter_columnFilters&&(k.bind("filterEnd"+m,function(){var d=a(document.activeElement).closest("td"),g=d.parent().children().index(d);x.hasClass(c.css.stickyVis)&&f.stickyHeaders_filteredToTop&&(b.scrollTo(0,k.position().top),g>=0&&e.$filters&&e.$filters.eq(g).find("a, select, input").filter(":visible").focus())}),c.filter.bindSearch(k,j.find("."+c.css.filter)),f.filter_hideFilters&&c.filter.hideFilters(e,w)),f.stickyHeaders_addResizeEvent&&k.bind("resize"+e.namespace+"stickyheaders",function(){C()}),k.triggerHandler("stickyHeadersInit")}},remove:function(d,e,f){var g=e.namespace+"stickyheaders ";e.$table.removeClass("hasStickyHeaders").unbind("pagerComplete resize filterEnd stickyHeadersUpdate ".split(" ").join(g).replace(/\s+/g," ")).next("."+c.css.stickyWrap).remove(),f.$sticky&&f.$sticky.length&&f.$sticky.remove(),a(b).add(f.stickyHeaders_xScroll).add(f.stickyHeaders_yScroll).add(f.stickyHeaders_attachTo).unbind("scroll resize ".split(" ").join(g).replace(/\s+/g," ")),c.addHeaderResizeEvent(d,!0)}})}(jQuery,window); \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 633e4626..efed4367 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2048,7 +2048,11 @@ $(function(){ // row stickyHeaders: '', - // jQuery selector or object to attach sticky header to + // jQuery selector or object to append sticky headers to + stickyHeaders_appendTo: null, + + // jQuery selector or object to attach sticky headers scroll listener to + // overridden by xScroll & yScroll settings stickyHeaders_attachTo: null, // jQuery selector or object to monitor horizontal scroll position @@ -3575,9 +3579,33 @@ $('table').trigger('search', false);
Example + + + String, jQuery Object + null + + Sticky Headers widget: jQuery selector or object to physically attach the sticky headers (v2.27.0). +
+

+ Note Appending the sticky headers to an element that does not have the same dimensions (width) as the table wrapper will produce a sticky header that does not match the table size! +

+ Use the stickyHeaders_appendTo option as follows:
+ 
$(function(){
+  $("table").tablesorter({
+    widgets: ["stickyHeaders"],
+    widgetOptions : {
+      // Where to attach the stickyHeaders
+      stickyHeaders_appendTo : '.wrapper' // $('.wrapper') jQuery object can also be used
+    }
+  });
+});
+ + + + - String + String, jQuery Object null Sticky Headers widget: points to the table wrapper to stick the headers to while scrolling. Use this option to point to their needs (v2.14.4). @@ -3599,7 +3627,7 @@ $('table').trigger('search', false);
- String + String, jQuery Object null Sticky Headers widget: points to the element in which to monitor for horizontal scrolling (v2.18.0). @@ -3623,7 +3651,7 @@ $('table').trigger('search', false); - String + String, jQuery Object null Sticky Headers widget: points to the element in which to monitor for vertical scrolling (v2.18.0). diff --git a/js/widgets/widget-stickyHeaders.js b/js/widgets/widget-stickyHeaders.js index 07b95f81..9a62b690 100644 --- a/js/widgets/widget-stickyHeaders.js +++ b/js/widgets/widget-stickyHeaders.js @@ -61,10 +61,11 @@ // ************************** ts.addWidget({ id: 'stickyHeaders', - priority: 60, // sticky widget must be initialized after the filter widget! + priority: 55, // sticky widget must be initialized after the filter widget! options: { stickyHeaders : '', // extra class name added to the sticky header row - stickyHeaders_attachTo : null, // jQuery selector or object to attach sticky header to + stickyHeaders_appendTo : null, // jQuery selector or object to phycially attach the sticky headers + stickyHeaders_attachTo : null, // jQuery selector or object to attach scroll listener to (overridden by xScroll & yScroll settings) stickyHeaders_xScroll : null, // jQuery selector or object to monitor horizontal scroll position (defaults: xScroll > attachTo > window) stickyHeaders_yScroll : null, // jQuery selector or object to monitor vertical scroll position (defaults: yScroll > attachTo > window) stickyHeaders_offset : 0, // number or jquery selector targeting the position:fixed element @@ -215,8 +216,12 @@ ts.bindEvents(table, $stickyThead.children().children('.' + ts.css.header)); - // add stickyheaders AFTER the table. If the table is selected by ID, the original one (first) will be returned. - $table.after( $stickyWrap ); + if (wo.stickyHeaders_appendTo) { + $(wo.stickyHeaders_appendTo).append( $stickyWrap ); + } else { + // add stickyheaders AFTER the table. If the table is selected by ID, the original one (first) will be returned. + $table.after( $stickyWrap ); + } // onRenderHeader is defined, we need to do something about it (fixes #641) if (c.onRenderHeader) {