function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sfg1sfg1 

freeze row and column header in page block table. (Not in jquery data table)

Hi All,

I need to freeze row and column in page block table. (Not in  jquery data table).

Thanks
Azar
Suraj TripathiSuraj Tripathi
Hi sfg1,

 Using jquery fixed header table plugin you can able to do that, check the below sample code for the sample. 
<apex:page standardController="Account" standardStylesheets="false">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="{!$Resource.jqueryfixheadertable}"></script>
   <apex:stylesheet value="{!$Resource.base}" />
   <apex:stylesheet value="{!$Resource.themefile}" />
   
 <apex:form id="theform">  

    <script>
    $(document).ready(function() {
        $('.fixme').fixheadertable({
             caption : 'My header is fixed !',
             height  : 200
        });
    });
    </script>  
   
   
   <apex:pageBlock title="My Content"  >

        <apex:pageBlockTable value="{!account.Contacts}" var="item" styleclass="fixme">
             <apex:column headerValue="Col1"   value="{!item.name}"/> 
              <apex:column headerValue="Col2"   value="{!item.name}"/> 
                <apex:column headerValue="Col2"   value="{!item.name}"/> 
                  <apex:column headerValue="Col2"   value="{!item.name}"/> 
      </apex:pageBlockTable> 

    </apex:pageBlock> </apex:form>
</apex:page>

Supporting files 
1. Base css - https://raw.githubusercontent.com/benjaminleouzon/tablefixedheader/master/css/base.css
2. Theme css - https://raw.githubusercontent.com/benjaminleouzon/tablefixedheader/master/jquery-ui/css/flick/jquery-ui-1.8.4.custom.css
3. FixedHeader Js - https://raw.githubusercontent.com/benjaminleouzon/tablefixedheader/master/javascript/jquery.fixheadertable.js

Kindly mark this as solved if it's resolved so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.

Regards
Suraj