0

I have added a custom scrollbar in my JSF datatable and it looks like that:

Datatable with custom scrollbar

My code is this:

<div class="verticalScrollbar" style="max-height:330px;">
    <h:dataTable var="entity" value="#{entityBean.entities}"
            styleClass="datatable"
            headerClass="datatable-header"
            rowClasses="datatable-odd-row,datatable-even-row">
        <h:column>
            <f:facet name="header">
                    <h:outputText value="Field 1" />
                </f:facet>
                <h:outputText value="#{entity.field1}" />  
        </h:column>  
        <h:column> 
            <f:facet name="header">
                    <h:outputText value="Field 2" />
                </f:facet> 
                <h:outputText value="#{entity.field2}" />  
        </h:column>  
        <h:column>  
            <f:facet name="header">
                    <h:outputText value="Field 3" />
                </f:facet> 
                <h:outputText value="#{entity.field3}" />  
        </h:column>  
        <h:column>  
            <f:facet name="header">
                    <h:outputText value="Field 4" />
                </f:facet> 
                <h:outputText value="#{entity.field4}" />  
        </h:column>
        <h:column>  
            <f:facet name="header">
                    <h:outputText value="Field 5" />
                </f:facet>
                <h:outputText value="#{entity.field5}" />  
        </h:column>  
        <h:column> 
            <f:facet name="header">
                    <h:outputText value="Field 6" />
                </f:facet> 
                <h:outputText value="#{entity.field6}" />  
        </h:column>  
    </h:dataTable>
</div>

<script>
  (function($){
     $(window).load(function(){
        $(".verticalScrollbar").mCustomScrollbar({
            scrollButtons:{ enable:false },
            horizontalScroll:false,
            advanced:{ updateOnBrowserResize:true, updateOnContentResize:true }
        });
     });
  })(jQuery);
</script>

The verticalScrollbar div contains the whole datatable including the header, so when I scroll down the table, I cannot see the header, like that:

Datatable scrolled down

How can I apply my scrollbar only to the body of the table excluding the header, so that the header stays still, while only the body scrolls down?

Stefanos Kargas
  • 10,547
  • 22
  • 76
  • 101
  • That is a JSF datatable, not a PrimeFaces datatable. – patstuart Oct 08 '13 at 16:34
  • Have you tried `$("[your table ID]").children("tbody").mCustomScrollbar(`? – patstuart Oct 08 '13 at 20:28
  • It doesn't work, because I cannot set max-height to tbody. When I set it, the component doesn't obey to the limit, probably because the actual height is controlled by the datatable component. I will have to put tbody into a div if this is possible – Stefanos Kargas Oct 09 '13 at 08:26
  • I found this: http://stackoverflow.com/questions/8321849/how-to-scroll-tables-tbody-independent-of-thead. It seems impossible even with a plain html table. – Stefanos Kargas Oct 09 '13 at 09:43
  • 1
    If you really want to do this then, you may then have to set a hard width for each column and create two separate tables. – patstuart Oct 09 '13 at 14:44

0 Answers0