From dc3ce2dd4da74dba4bce4ef947f567d30347964e Mon Sep 17 00:00:00 2001 From: Fazlur Rahman Date: Wed, 5 Oct 2016 15:50:30 +0700 Subject: [PATCH 1/2] Fixed Column Integration Add options to FixedHeader fixedColumns: { isFixed: false, left: 0, right: 0 } Example: fixedHeader: { header: true, headerOffset: 50, fixedColumns: { isFixed: true, left: 2, right: 1 }, }, --- js/dataTables.fixedHeader.js | 104 ++++++++++++++++++++++++++++++++--- 1 file changed, 97 insertions(+), 7 deletions(-) diff --git a/js/dataTables.fixedHeader.js b/js/dataTables.fixedHeader.js index 7c236da..34c5a52 100644 --- a/js/dataTables.fixedHeader.js +++ b/js/dataTables.fixedHeader.js @@ -102,7 +102,8 @@ var FixedHeader = function ( dt, config ) { header: { host: null, floating: null, - placeholder: null + placeholder: null, + container: null, }, footer: { host: null, @@ -265,6 +266,7 @@ $.extend( FixedHeader.prototype, { var itemElement = item === 'header' ? this.dom.thead : this.dom.tfoot; + var fixedColumns = this.c.fixedColumns; if ( ! force && itemDom.floating ) { // existing floating element - reuse it @@ -278,11 +280,78 @@ $.extend( FixedHeader.prototype, { itemDom.floating.remove(); } - itemDom.floating = $( dt.table().node().cloneNode( false ) ) - .css( 'table-layout', 'fixed' ) - .removeAttr( 'id' ) - .append( itemElement ) - .appendTo( 'body' ); + // Check if there is fixed columns options + if ( fixedColumns.isFixed ) { + itemDom.container = $('.fixedHeader-container'); + if (itemDom.container.length <= 0) { + // Create + itemDom.container = $('
'); + itemDom.container.addClass('fixedHeader-container'); + + } else { + itemDom.container.empty(); + } + + var itemScroll = $('
'); + itemScroll + .addClass('fixedHeader-scroll') + .appendTo( itemDom.container ); + + itemDom.floating = $( dt.table().node().cloneNode( false ) ) + .css( 'table-layout', 'fixed' ) + .removeAttr( 'id' ) + .append( itemElement ) + .appendTo( itemScroll ); + + var itemElementLeft = itemElement; + var itemElementRight = itemElement; + + // Append left fixed column head + if ( fixedColumns.left > 0 ) { + var leftWrapper = $('
'); + leftWrapper.addClass('DTFH_Wrapper DTFH_LeftWrapper'); + + var tableFloatingLeft = $( dt.table().node().cloneNode( false ) ); + var floatingCloneLeft = tableFloatingLeft.clone( true ) + .removeAttr('id') + .addClass('fixedHeader-floating dataTable-clone-left').css('width', 'auto'); + + itemElementLeft.clone( true ).appendTo( floatingCloneLeft ); + + floatingCloneLeft.find('th:gt('+ (fixedColumns.left - 1) +')').remove(); + floatingCloneLeft.appendTo( leftWrapper ); + + leftWrapper.appendTo( itemDom.container ); + } + + // Append right fixed column head + if ( fixedColumns.right > 0 ) { + var rightWrapper = $('
'); + rightWrapper.addClass('DTFH_Wrapper DTFH_RightWrapper'); + + var tableFloatingRight = $( dt.table().node().cloneNode( false ) ); + var floatingCloneRight = tableFloatingRight.clone() + .removeAttr('id') + .addClass('fixedHeader-floating dataTable-clone-right').css('width', 'auto'); + + itemElementRight.clone( true ).appendTo( floatingCloneRight ); + + var elementToRemove = floatingCloneRight.find('th:lt(-'+ fixedColumns.right +')'); + elementToRemove.remove(); + floatingCloneRight.appendTo( rightWrapper ); + + rightWrapper.appendTo( itemDom.container ); + } + + itemDom.container.appendTo('body'); + + } else { + itemDom.floating = $( dt.table().node().cloneNode( false ) ) + .css( 'table-layout', 'fixed' ) + .removeAttr( 'id' ) + .append( itemElement ) + .appendTo( 'body' ); + } // Insert a fake thead/tfoot into the DataTable to stop it jumping around itemDom.placeholder = itemElement.clone( false ); @@ -392,6 +461,11 @@ $.extend( FixedHeader.prototype, { var dt = this.s.dt; var itemDom = this.dom[ item ]; var position = this.s.position; + var table = dt.table(); + var tableNode = $( dt.table().node() ); + var tableParent = tableNode.parent(); + var tableParentWidth = tableParent.width(); + var tableParentLeft = tableParent.offset().left; // Record focus. Browser's will cause input elements to loose focus if // they are inserted else where in the doc @@ -419,6 +493,10 @@ $.extend( FixedHeader.prototype, { if ( itemDom.floating ) { itemDom.floating.remove(); itemDom.floating = null; + if ( itemDom.container ) { + itemDom.container.remove(); + itemDom.container = null; + } } } else if ( mode === 'in' ) { @@ -432,6 +510,13 @@ $.extend( FixedHeader.prototype, { .css( 'left', position.left+'px' ) .css( 'width', position.width+'px' ); + if ( itemDom.container ) { + itemDom.container + .css( item === 'header' ? 'top' : 'bottom', this.c[item+'Offset'] ) + .css( 'left', tableParentLeft+'px' ) + .css( 'width', tableParentWidth+'px' ); + } + if ( item === 'footer' ) { itemDom.floating.css( 'top', '' ); } @@ -582,7 +667,12 @@ FixedHeader.defaults = { header: true, footer: false, headerOffset: 0, - footerOffset: 0 + footerOffset: 0, + fixedColumns: { + isFixed: false, + left: 0, + right: 0 + } }; From d90725a0cd54e5017fc261d0136b06b05173a75d Mon Sep 17 00:00:00 2001 From: Fazlur Rahman Date: Thu, 6 Oct 2016 10:29:33 +0700 Subject: [PATCH 2/2] FixedColumn Integration Sync Scroll Synchronize scroll between dataTables_scrollBody and fixedHeader-scroll --- css/fixedHeader.dataTables.scss | 32 ++++++++++++++++++++++++++++++++ js/dataTables.fixedHeader.js | 6 ++++++ 2 files changed, 38 insertions(+) diff --git a/css/fixedHeader.dataTables.scss b/css/fixedHeader.dataTables.scss index 7a6185b..5115dc3 100644 --- a/css/fixedHeader.dataTables.scss +++ b/css/fixedHeader.dataTables.scss @@ -19,3 +19,35 @@ table.fixedHeader-locked { display: none; } } + +.fixedHeader-container { + position: fixed; + top: 50px; + z-index: 99; + overflow: hidden; + box-shadow: 0 3px 5px rgba(222, 222, 222, 0.65); +} +.fixedHeader-scroll { + position: relative; + width: 100%; + overflow: hidden; +} +.table-analyze-results.fixedHeader-floating { + +} +.fixedHeader-container table.fixedHeader-floating { + position: relative !important; + top: 0 !important; + left: 0 !important; +} +.DTFH_Wrapper { + position: absolute; + top: 0; + z-index: 999; +} +.DTFH_LeftWrapper { + left: 0; +} +.DTFH_RightWrapper { + right: 0; +} diff --git a/js/dataTables.fixedHeader.js b/js/dataTables.fixedHeader.js index 34c5a52..711e952 100644 --- a/js/dataTables.fixedHeader.js +++ b/js/dataTables.fixedHeader.js @@ -303,6 +303,12 @@ $.extend( FixedHeader.prototype, { .append( itemElement ) .appendTo( itemScroll ); + // Sync Scroll with scrollBody + var tableScrollBody = $(".dataTables_scrollBody"); + tableScrollBody.scroll( function() { + itemScroll.scrollLeft( tableScrollBody.scrollLeft() ); + }); + var itemElementLeft = itemElement; var itemElementRight = itemElement;