+ Start a Discussion
suresh sanneboinasuresh sanneboina 

Fixed header and footer in vf page

Hi,

I have a table in the vf page. the header and the last row(Footer) should not be scrolled.

Regards
Suresh S
Best Answer chosen by suresh sanneboina
bob_buzzardbob_buzzard
The fixedheader page has an example of a table with fixed header and footer.

All Answers

bob_buzzardbob_buzzard
You'll need to use a JavaScript library for this.  I've used:

http://fixedheadertable.com/

and 

http://mkoryak.github.io/floatThead/

successfully in the past.
suresh sanneboinasuresh sanneboina
Hi bob

Thanks for replying 

How can the footer(last row) be fixed.

Suresh S
bob_buzzardbob_buzzard
The fixedheader page has an example of a table with fixed header and footer.
This was selected as the best answer
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student
Bob, what steps do I have to do to implement the fixedheadertable?
bob_buzzardbob_buzzard
Check out the links I posted above - they have examples.
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student
I tried Bob, but didnt come across any set methods of doing it. I know what your two examples will llook like, just not how to implement it.
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student
I have had a look at github...but cannot work out what to add to my VISUALFORCE page....I mean, maybe I add it as a static resource...but then how do I reference it?
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student
Suresh, this looks exactly like what I need. Fixed tables on a tabbed visualforce page. I actually have gotte the fixed headers to work, except it failed on a tabbed VF page. I tried to save the extension except it errored with:

Error: Compile Error: expecting a left angle bracket, found 'records' at line 7 column 16

What can I do to rectify this error?

Thank you so much for your help. 
suresh sanneboinasuresh sanneboina
Not to change any code get the js file from google. and create a custom object and some custom fields and create a field set.
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student
or do I just replace records with custom object...If thats the case, will there have to be a different class for each child that has a list with a fixed header?
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student
I will work on this. Thank you so much for your help. I will let you know how I go.
suresh sanneboinasuresh sanneboina


records is used to get the data existing in the custom object to display in the vf page table.

Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student
Hey Suresh,

I have added field sets and a custom object with a child to Account. I am not sure if you wanted the actually custom object to be called records or just any custom object thats a child to accounts. Regardless this is my code:

I am getting this error: Error: Compile Error: expecting a left angle bracket, found '(' at line 19 column 26

public class CustomClass  {  
    //Account
    public Account account {get; set;}
 
    //List to hold Custom Object records
    public List<Service__c> records {get; set;}
 
    //List to hold fields
    public List<AllServiceFields> fields{get; set;}
 
    public List<DestinyServicesFieldSet> vfFields {get; set;}
 
    //Standard Controller
    public CustomClass (ApexPages.StandardController controller) {      
        //Get record
        account = (Account)controller.getRecord();
     
        //Memory allocation
        records = new List();
     
        //Method calling
        funds();
    }
 
    //This method is to get related fund data for Account record.
    public void funds() {
        String fieldvalue='';
        String namespaceval = '';
        Integer namespaceLength = 0;

        LIST namespaceprefix=[SELECT NamespacePrefix FROM ApexClass WHERE Name = 'Service__c'];
     
        if(namespaceprefix.size()>0)
        {
            namespaceval = namespaceprefix[0].NamespacePrefix + '__';
            namespaceLength = namespaceval.length();
        }
             
        //populate the list with the fields      
        fields = Schema.SObjectType.CustomObject__c.fieldSets.FieldSetName.getFields();
     
        // In visualforcepages the alias should not be more than 25 characters, So do concatenate .
        for(Schema.FieldSetMember f:fields){
            fieldvalue +=f.getFieldPath().subString(namespaceLength) + ',';
            /*
            if(f.getType() != Schema.DisplayType.String){
     
            System.debug(f.getFieldPath());
            fieldvalue +=f.getFieldPath().subString(0,f.getFieldPath().length()-3)+',';
            }else{
                fieldvalue +=f.getFieldPath()+',';
            }*/
            //System.debug(vfFields);
        }    
     
        fieldvalue = fieldvalue.removeEnd(',');
        vfFields=fieldvalue.split(',');

        records = getResultById(account.Id , fields);
    }
    public List getResultById(Id entityId , List fields) {
     
        //String to hold soql string
        System.debug(entityId );
        String query = 'SELECT ';
        String querywhere = ' ';
        String namespaceval = ' ';
        Integer namespaceLength = 0;

        LIST namespaceprefix=[SELECT NamespacePrefix FROM ApexClass WHERE Name = 'Service__c'];
     
        if(namespaceprefix.size()>0)
        {
            namespaceval = namespaceprefix[0].NamespacePrefix + '__';
            namespaceLength = namespaceval.length();
        }      
     
        //loop through fields
        for(Schema.FieldSetMember f : fields) {
            if(f.getType() != Schema.DisplayType.String)
            {
                query += 'sum('+ f.getFieldPath()  + ') ' + f.getFieldPath().subString(namespaceLength)  + ', ';
                querywhere += 'or (' + f.getFieldPath() + ' != null) ';
            }
            else
            {
                query += f.getFieldPath() + ' ' + f.getFieldPath().subString(namespaceLength)  + ', ';
            }
        }
             
        query = query.removeEnd(', ');
        query += ' FROM '+ namespaceval + 'Service__c WHERE Account(Master-Detail Field) =: entityId';              
   
        querywhere = querywhere.replaceFirst('or', 'and (');
        query += querywhere + ')';
        query += ' group by rollup ('+ namespaceval + 'Service__c)';
     
        list lstfundSummary = Database.query(query);
        System.debug('\n lstfundSummary'+lstfundSummary);
        return lstfundSummary;
    }
}

Thank you for uyour help
Raghavendra Reddy .DRaghavendra Reddy .D
<apex:page showHeader="false" sidebar="false">
<html>
<head>
<style type="text/css">
body {
    background-color: #CCC;
    margin:48px 0px 0px 64px;
}
div#topdiv {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    color:#CCC;
    background:#333;
    padding:8px;
}
div#bottomdiv {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    color:#CCC;
    background:#333;
    padding:8px;
}
</style>
</head>
<body>
<div id="topdiv">HeaderRagava</div>
<h1>Page Heading</h1>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<div id="bottomdiv">FooterRagava</div>
</body>
</html>

</apex:page>
Thanks
This one is help full for u .

pavan@sforcepavan@sforce
Thanx Ragava.. My probles is solved.