problem with stickyHeader on datatable

[marcelocaser]

Hi again,

I was testing the property stickHeader , but it does not render as expected. For testing , use datatable.xhtml file and I enabled the stickHeader property to true. If you open the top menu " Adamantium Theme" , you will see the problem.

[mert.sincan]

I am working on this issue. I need to override some functions of layout.js and datatable.js.

[marcelocaser]

Ok.... thank you!

[mert.sincan]

Please try with;

Code: Select all

<style type="text/css">
       .ui-datatable .ui-datatable-sticky.ui-sticky.Top146 {
           top: 146px !important;
       }
       .ui-datatable .ui-datatable-sticky.ui-sticky.Top80 {
           top: 80px !important;
       }
</style>
        
<script type="text/javascript">
//<![CDATA[
 	PrimeFaces.widget.DataTable.prototype.setupStickyHeader = function() {
        var table = this.thead.parent(),
        offset = table.offset(),
        win = $(window),
        $this = this,
        stickyNS = 'scroll.' + this.id,
        resizeNS = 'resize.sticky-' + this.id,
        menuWrapper = $('#layout-menu-cover'); 

        this.cloneContainer = $('<div class="ui-datatable ui-datatable-sticky ui-widget"><table></table></div>');
        this.clone = this.thead.clone(true);
        this.cloneContainer.children('table').append(this.clone);
        
        this.cloneContainer.css({
            position: 'absolute',
            width: table.outerWidth(),
            top: offset.top,
            left: offset.left,
            'z-index': ++PrimeFaces.zindex
        })
        .appendTo(this.jq);

        win.off(stickyNS).on(stickyNS, function() {
            var scrollTop = win.scrollTop(),
            tableOffset = table.offset(),
            top = menuWrapper.hasClass('active-menu') ? '146px' : '80px';
            
            if((scrollTop + parseInt(top)) > tableOffset.top) {
                $this.cloneContainer.css({
                                        'position': 'fixed'
                                    })
                                    .addClass('ui-shadow ui-sticky');
                            
                if(menuWrapper.hasClass('active-menu')) {
                    $this.cloneContainer.removeClass('Top80').addClass('Top146');
                }
                else {
                     $this.cloneContainer.removeClass('Top146').addClass('Top80');
                }
                
                if(scrollTop >= (tableOffset.top + $this.tbody.height()))
                    $this.cloneContainer.hide();
                else
                    $this.cloneContainer.show();
            }
            else {
                $this.cloneContainer.css({
                                        'position': 'absolute',
                                        'top': tableOffset.top
                                    })
                                    .removeClass('ui-shadow ui-sticky');
            }
        })
        .off(resizeNS).on(resizeNS, function() {
            $this.cloneContainer.width(table.outerWidth());
        });
        
        //filter support
        this.thead.find('.ui-column-filter').prop('disabled', true);
        
        //Adamantium Menu
        var menulinks = menuWrapper.find('ul.layout-menu a.menulink'),
            menuButton = $('#menu-button'),
            stickyHeader = $('.ui-datatable.ui-datatable-sticky'),
            menuButtonClick;
    
        menuWrapper.css({'z-index': ++PrimeFaces.zindex});
        $('#layout-topbar').css({'z-index': ++PrimeFaces.zindex});

        menuButton.on('click',function() { 
            menuButtonClick = true;
            if(menuWrapper.hasClass('active-menu')){
                stickyHeader.removeClass('Top80').addClass('Top146');
                
            }
            else{
                stickyHeader.removeClass('Top146').addClass('Top80');
            }
        });
        
        menulinks.clickOff(function(e) {
            if(menuButtonClick) {
                menuButtonClick = false;
            } else {
                stickyHeader.removeClass('Top146').addClass('Top80');
            }
        });
        
    };

//]]>
</script>

[marcelocaser]

In which file I can put these changes?

[mert.sincan]

New JS file or layout.js.

for new JS file, please add in template;
<h:outputScript name="js/newJSfile.js" library="..." />

[marcelocaser]

Hi man,

the stickyHeader="true" option, it worked like he was stickyHeader="false". No change that I could see.

template.xhtml

Code: Select all

h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        

        <h:outputScript name="js/ripple-effect.js" library="adamantium-layout" />
        <h:outputScript name="js/perfect-scrollbar.js" library="adamantium-layout" />
        <h:outputScript name="js/layout.js" library="adamantium-layout" />
        <h:outputScript name="js/teste.js" library="adamantium-layout" />

        <ui:insert name="head" />
    </h:head>

    ...    

    <h:outputStylesheet name="css/teste.css" library="adamantium-layout" />
        
    </h:body>

teste.js

Code: Select all

PrimeFaces.widget.DataTable.prototype.setupStickyHeader = function () {
    var table = this.thead.parent(),
            offset = table.offset(),
            win = $(window),
            $this = this,
            stickyNS = 'scroll.' + this.id,
            resizeNS = 'resize.sticky-' + this.id,
            menuWrapper = $('#layout-menu-cover');

    this.cloneContainer = $('<div class="ui-datatable ui-datatable-sticky ui-widget"><table></table></div>');
    this.clone = this.thead.clone(true);
    this.cloneContainer.children('table').append(this.clone);

    this.cloneContainer.css({
        position: 'absolute',
        width: table.outerWidth(),
        top: offset.top,
        left: offset.left,
        'z-index': ++PrimeFaces.zindex
    })
            .appendTo(this.jq);

    win.off(stickyNS).on(stickyNS, function () {
        var scrollTop = win.scrollTop(),
                tableOffset = table.offset(),
                top = menuWrapper.hasClass('active-menu') ? '146px' : '80px';

        if ((scrollTop + parseInt(top)) > tableOffset.top) {
            $this.cloneContainer.css({
                'position': 'fixed'
            })
                    .addClass('ui-shadow ui-sticky');

            if (menuWrapper.hasClass('active-menu')) {
                $this.cloneContainer.removeClass('Top80').addClass('Top146');
            }
            else {
                $this.cloneContainer.removeClass('Top146').addClass('Top80');
            }

            if (scrollTop >= (tableOffset.top + $this.tbody.height()))
                $this.cloneContainer.hide();
            else
                $this.cloneContainer.show();
        }
        else {
            $this.cloneContainer.css({
                'position': 'absolute',
                'top': tableOffset.top
            })
                    .removeClass('ui-shadow ui-sticky');
        }
    })
            .off(resizeNS).on(resizeNS, function () {
        $this.cloneContainer.width(table.outerWidth());
    });

    //filter support
    this.thead.find('.ui-column-filter').prop('disabled', true);

    //Adamantium Menu
    var menulinks = menuWrapper.find('ul.layout-menu a.menulink'),
            menuButton = $('#menu-button'),
            stickyHeader = $('.ui-datatable.ui-datatable-sticky'),
            menuButtonClick;

    menuWrapper.css({'z-index': ++PrimeFaces.zindex});
    $('#layout-topbar').css({'z-index': ++PrimeFaces.zindex});

    menuButton.on('click', function () {
        menuButtonClick = true;
        if (menuWrapper.hasClass('active-menu')) {
            stickyHeader.removeClass('Top80').addClass('Top146');

        }
        else {
            stickyHeader.removeClass('Top146').addClass('Top80');
        }
    });

    menulinks.clickOff(function (e) {
        if (menuButtonClick) {
            menuButtonClick = false;
        } else {
            stickyHeader.removeClass('Top146').addClass('Top80');
        }
    });

};

teste.css

Code: Select all

.ui-datatable .ui-datatable-sticky.ui-sticky.Top146 {
    top: 146px !important;
}
.ui-datatable .ui-datatable-sticky.ui-sticky.Top80 {
    top: 80px !important;
}

[mert.sincan]

I tested after adding new files like teste.js and teste.css. I didn't see a bug. Maybe you can add my css and js into your datatable page to try.

Screenshots;