'),
+ limiter: null,
placeholder: null
},
footer: {
host: null,
+ scrollAdjust: null,
floating: null,
- floatingParent: $('
'),
+ floatingParent: $(
+ '
'),
+ limiter: null,
placeholder: null
}
};
- this.dom.header.host = this.dom.thead.parent();
- this.dom.footer.host = this.dom.tfoot.parent();
+ var dom = this.dom;
+
+ dom.header.host = dom.thead.parent();
+ dom.header.limiter = dom.header.floatingParent.children();
+ dom.header.scrollAdjust = dom.header.limiter.children();
+
+ dom.footer.host = dom.tfoot.parent();
+ dom.footer.limiter = dom.footer.floatingParent.children();
+ dom.footer.scrollAdjust = dom.footer.limiter.children();
var dtSettings = dt.settings()[0];
if (dtSettings._fixedHeader) {
@@ -222,6 +243,8 @@ $.extend(FixedHeader.prototype, {
this._positions();
this._scroll(force !== undefined ? force : true);
+ this._widths(this.dom.header);
+ this._widths(this.dom.footer);
},
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
@@ -313,11 +336,10 @@ $.extend(FixedHeader.prototype, {
else {
if (itemDom.floating) {
if (itemDom.placeholder !== null) {
- itemDom.placeholder.remove();
+ itemDom.placeholder.detach();
}
- itemDom.floating.children().detach();
- itemDom.floating.remove();
+ itemDom.floating.detach();
}
var tableNode = $(dt.table().node());
@@ -330,14 +352,11 @@ $.extend(FixedHeader.prototype, {
top: 0,
left: 0
})
- .removeAttr('id')
- .append(itemElement);
+ .removeAttr('id');
itemDom.floatingParent
.css({
- width: scrollBody.width(),
- overflow: 'hidden',
- height: 'fit-content',
+ width: scrollBody[0].offsetWidth,
position: 'fixed',
left: scrollEnabled
? tableNode.offset().left + scrollBody.scrollLeft()
@@ -359,32 +378,69 @@ $.extend(FixedHeader.prototype, {
? 'dtfh-floatingparent-foot'
: 'dtfh-floatingparent-head'
)
- .append(itemDom.floating)
- .appendTo('body');
+ .appendTo('body')
+ .children()
+ .eq(0);
+
+ itemDom.limiter
+ .css({
+ width: '100%',
+ overflow: 'hidden',
+ height: 'fit-content'
+ });
+
+ itemDom.scrollAdjust
+ .append(itemDom.floating);
this._stickyPosition(itemDom.floating, '-');
var scrollLeftUpdate = function () {
var scrollLeft = scrollBody.scrollLeft();
that.s.scrollLeft = { footer: scrollLeft, header: scrollLeft };
- itemDom.floatingParent.scrollLeft(that.s.scrollLeft.header);
+ itemDom.limiter.scrollLeft(that.s.scrollLeft.header);
};
scrollLeftUpdate();
scrollBody.off('scroll.dtfh').on('scroll.dtfh', scrollLeftUpdate);
+ // Need padding on the header's container to allow for a scrollbar,
+ // just like how DataTables handles it
+ itemDom.scrollAdjust.css({
+ width: 'fit-content',
+ paddingRight: that.s.dt.settings()[0].oBrowser.barWidth
+ });
+
+ // Blocker to hide the table behind the scrollbar - this needs to use
+ // fixed positioning in the container since we don't have an outer wrapper
+ let blocker = $(
+ item === 'footer'
+ ? 'div.dtfc-bottom-blocker'
+ : 'div.dtfc-top-blocker',
+ dt.table().container()
+ );
+
+ if (blocker.length) {
+ blocker
+ .clone()
+ .appendTo(itemDom.floatingParent)
+ .css({
+ position: 'fixed',
+ right: blocker.width()
+ });
+ }
+
// Insert a fake thead/tfoot into the DataTable to stop it jumping around
itemDom.placeholder = itemElement.clone(false);
itemDom.placeholder.find('*[id]').removeAttr('id');
+ // Move the thead / tfoot elements around - original into the floating
+ // element and clone into the original table
itemDom.host.prepend(itemDom.placeholder);
+ itemDom.floating.append(itemElement);
+
+ this._widths(itemDom);
- // Copy the `colgroup` element for widths
- itemDom.placeholder
- .parent()
- .find('colgroup')
- .clone()
- .appendTo(itemDom.floating);
+ return scrollLeftUpdate;
}
},
@@ -406,19 +462,12 @@ $.extend(FixedHeader.prototype, {
var potential;
if (right !== 'auto' && !rtl) {
- // New position either adds or dismisses the barWidth
- potential =
- +right.replace(/px/g, '') +
- (sign === '-' ? -1 : 1) *
- that.s.dt.settings()[0].oBrowser.barWidth;
+ potential = +right.replace(/px/g, '')
$(this).css('right', potential > 0 ? potential : 0);
}
else if (left !== 'auto' && rtl) {
- potential =
- +left.replace(/px/g, '') +
- (sign === '-' ? -1 : 1) *
- that.s.dt.settings()[0].oBrowser.barWidth;
+ potential = +left.replace(/px/g, '');
$(this).css('left', potential > 0 ? potential : 0);
}
@@ -469,6 +518,7 @@ $.extend(FixedHeader.prototype, {
* @private
*/
_modeChange: function (mode, item, forceChange) {
+ var dt = this.s.dt;
var itemDom = this.dom[item];
var position = this.s.position;
@@ -506,11 +556,13 @@ $.extend(FixedHeader.prototype, {
itemDom.placeholder = null;
}
- if (item === 'header') {
- itemDom.host.prepend(tablePart);
- }
- else {
- itemDom.host.append(tablePart);
+ if (!$.contains(itemDom.host[0], tablePart[0])) {
+ if (item === 'header') {
+ itemDom.host.prepend(tablePart);
+ }
+ else {
+ itemDom.host.append(tablePart);
+ }
}
if (itemDom.floating) {
@@ -520,6 +572,7 @@ $.extend(FixedHeader.prototype, {
}
if (itemDom.floatingParent) {
+ itemDom.floatingParent.find('div.dtfc-top-blocker').remove();
itemDom.floatingParent.remove();
}
@@ -528,9 +581,9 @@ $.extend(FixedHeader.prototype, {
);
}
else if (mode === 'in') {
- // Remove the header from the read header and insert into a fixed
+ // Remove the header from the real table and insert into a fixed
// positioned floating table clone
- this._clone(item, forceChange);
+ let scrollLeftUpdate = this._clone(item, forceChange);
// Get useful position values
var scrollOffset = scrollBody.offset();
@@ -571,11 +624,14 @@ $.extend(FixedHeader.prototype, {
.css({
left: position.left,
'z-index': 3
- })
- .append(itemDom.floating);
+ });
importantWidth(position.width);
+ if (scrollLeftUpdate) {
+ scrollLeftUpdate();
+ }
+
if (item === 'footer') {
itemDom.floating.css('top', '');
}
@@ -619,6 +675,8 @@ $.extend(FixedHeader.prototype, {
this.s.scrollLeft.header = -1;
this.s.scrollLeft.footer = -1;
this.s[item + 'Mode'] = mode;
+
+ dt.trigger('fixedheader-mode', [mode, item]);
},
/**
@@ -739,12 +797,17 @@ $.extend(FixedHeader.prototype, {
forceChange = true;
}
else {
- this.dom.header.floatingParent
+ var child = this.dom.header.floatingParent
.css({
top: this.c.headerOffset,
position: 'fixed'
})
- .append(this.dom.header.floating);
+ .children()
+ .eq(0);
+
+ if (child.find(this.dom.header.floating).length === 0) {
+ child.append(this.dom.header.floating);
+ }
}
}
// Anything else and the view is below the table
@@ -938,6 +1001,46 @@ $.extend(FixedHeader.prototype, {
return true;
}
return false;
+ },
+
+ /**
+ * Realign columns by using the colgroup tag and
+ * checking column widths
+ */
+ _widths: function (itemDom) {
+ if (! itemDom || ! itemDom.placeholder) {
+ return;
+ }
+
+ // Match the table overall width
+ var tableNode = $(this.s.dt.table().node());
+ var scrollBody = $(tableNode.parent());
+
+ itemDom.floatingParent.css('width', scrollBody[0].offsetWidth);
+ itemDom.floating.css('width', tableNode[0].offsetWidth);
+
+ // Strip out the old colgroup
+ $('colgroup', itemDom.floating).remove();
+
+ // Copy the `colgroup` element to define the number of columns - needed
+ // for complex header cases where a column might not have a unique
+ // header
+ var cols = itemDom.placeholder
+ .parent()
+ .find('colgroup')
+ .clone()
+ .appendTo(itemDom.floating)
+ .find('col');
+
+ // However, the widths defined in the colgroup from the DataTable might
+ // not exactly reflect the actual widths of the columns (content can
+ // force it to stretch). So we need to copy the actual widths into the
+ // colgroup / col's used for the floating header.
+ var widths = this.s.dt.columns(':visible').widths();
+
+ for (var i=0 ; i
, settings: boolean | ConfigFixedHeader): void;
+ new (dt: Api, settings: boolean | ConfigFixedHeader): DataTablesStatic['FixedHeader'];
/**
* FixedHeader version