0

I can't figure out if the Script itself isn't working or if I am doing something else wrong with my visualforce page. My goal is to get the table headers to stay visible but every single approach I have tried doesn't work.

Here is the current plugin I am trying: https://github.com/Pexlify/floating-headers-in-Visualforce-PageBlockTable

I originally had the table as a pageblocktable but chnaged it to DataTable in attempt to get this to work. Here is my visualforce page (stripped down):

<apex:page controller="controller_LicensingUpdateGrid" sidebar="false">
    <script src="{!URLFOR($Resource.jQuery)}"></script>
    <script src="{!URLFOR($Resource.StickHeader)}"></script>
    <script type="text/javascript">
        $.noConflict();
        jQuery(document).ready(function() {
            stickHeader('licenseTable', 'headerClass');
        });
    </script>
    <style>
***styles removed***
        #section {
        width:100%;
        float:left;
        padding:10px;
        }
        .dateFormat{
        visibility:hidden;
        }
        .mytable{
        color:purple;
        width:100%;
        }
        .mytable tr:hover{
        background-color:#D8BFD8;
        }
        .mytable td {
        padding: 1px;
        text-align: center;
        }
        .mytable th {
        padding: 1px;
        text-align: center;
        background-color:purple;
        color:White;
        }
    </style> 
    <apex:form id="theForm" style="background-color:purple;">

***Code removed***

        <div id="section">
            <apex:pageBlock id="LicenseList" tabStyle="License__c" >
                <apex:pageMessages />

                <apex:datatable value="{!TheLicenses}" var="lic" id="licenseTable" styleclass="mytable">

                    <apex:column headerValue="License" headerClass="headerClass" >
                        <apex:outputlink target="_blank" value="/{!Lic.Id}">{!Lic.Name}</apex:outputlink>
                    </apex:column>
                    <apex:column headerValue="License #">
                        <apex:inputField value="{!Lic.License_Number__c}"/>
                    </apex:column>
                    <apex:column headerValue="Exp Date">
                        <apex:inputfield value="{!Lic.Expiration_Date__c}"/>
                    </apex:column>
                    <apex:column headerValue="Perpetual?">
                        <apex:inputcheckbox value="{!Lic.Perpetual__c}"/>
                    </apex:column>
                    <apex:column headerValue="Status">
                        <apex:outputtext escape="false" value="{!Lic.Status_Icon__c}" />
                    </apex:column>
                    <apex:column headerValue="Allstate">
                        <apex:inputcheckbox value="{!Lic.AllState_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Aflac">
                        <apex:inputcheckbox value="{!Lic.AFLAC_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="BM">
                        <apex:inputcheckbox value="{!Lic.Boston_Mutual_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Guardian">
                        <apex:inputcheckbox value="{!Lic.Guardian_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Hartford">
                        <apex:inputcheckbox value="{!Lic.Hartford_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Humana">
                        <apex:inputcheckbox value="{!Lic.HUMANA_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Lincoln">
                        <apex:inputcheckbox value="{!Lic.Lincoln_Financial_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Manhattan">
                        <apex:inputcheckbox value="{!Lic.Manhattan_Life_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Metlife">
                        <apex:inputcheckbox value="{!Lic.MetLife_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="TransA">
                        <apex:inputcheckbox value="{!Lic.TransAmerica_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="TrustMark">
                        <apex:inputcheckbox value="{!Lic.Trustmark_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Unum">
                        <apex:inputcheckbox value="{!Lic.UNUM_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Voya">
                        <apex:inputcheckbox value="{!Lic.VOYA_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="Zurich">
                        <apex:inputcheckbox value="{!Lic.Zurich_Appointment__c}"/>
                    </apex:column>
                    <apex:column headerValue="5Star">
                        <apex:inputcheckbox value="{!Lic.X5_Star_Appointment__c}"/>
                    </apex:column>

                </apex:datatable>
            </apex:pageBlock>
***Code Removed***
        </div>
    </apex:form>
</apex:page>
  • FYI, i do realize that I only have the headerClass attribute set on the one column. This was intentional as I am trying to get it to work on one first before copying to all columns. – Matt M Sep 5 '18 at 20:33
0
+50

Here is the working example. I have made some changes in the CSS and table structure which you can refer for your solution.

<apex:page standardController="Account">

  <style>
   #section {
    width:100%;
    float:left;
    padding:10px;

    }
    .dateFormat{
    visibility:hidden;
    }
    .mytable{
    color:purple;
    width:100%;

    }
    .mytable tr:hover{
    background-color:#D8BFD8;
    }
    .mytable td {
    padding: 1px;
    text-align: center;
    }
    .mytable th {
    padding: 1px;
    text-align: center;
    background-color:purple;
    color:White;
    }
    .tableContent {
        height: 300px;
        overflow-y: scroll;
    }
 </style>
 <div id="section">
  <apex:form>
        <apex:pageBlock id="LicenseList" tabStyle="Account" >
            <apex:pageMessages />
            <div class="tableHeader">
                <table class="mytable">
                    <tbody>
                        <tr> 
                            <th style="width: 50%"> Id</th>
                            <th style="width: 50%"> Name</th>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tableContent">
                <apex:datatable value="{!Account.Contacts}" var="lic" id="licenseTable" styleclass="mytable">

                    <apex:column width="50%">
                        <apex:outputlink target="_blank" value="/{!lic.Id}">{!Lic.Name}</apex:outputlink>
                    </apex:column>
                    <apex:column style="width: 50%">
                        <apex:inputField value="{!Lic.Name}"/>
                    </apex:column>
                </apex:datatable>
            </div>
        </apex:pageBlock>
     </apex:form>     
</div>

0
table tbody, table thead
{
    display: block;
}

table tbody 
{
   overflow: auto;
   height: 100px;
}

table {
    width: 350px; /* can be dynamic */
}

th
{
    width: 75px;
}

found this answer, and it might work, since apex tables are rendered as plain html

JS fiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.