Apply fixed headers in Visual Force Page for Large Records

By | November 4, 2016

Visualforce page can display a maximum of 1000 records and let us tell you this is not a small number. When all the 1000 records show up on your page, you have to keep scrolling down to see the records appearing at the bottom of your table. Though, by the time you reach the bottom records you have no track of the column headers they correspond to. It just appears to be some blob of data and could be really confusing for the one who is looking at them. Won’t it be good if you have the headers of the table fixed and no matter how much you scroll down or up, they are always there for you.

There are various work arounds to achieve the fixed headers for table. But the method we are going to discuss is easy as compared to others. First download the zip file for “jqueryfixedheadertable”. Extract it and upload it in static resources of your Salesforce org with the same name. Now, include this script in your VisualForce page.

Including static resource file in your code

Including static resource file in your code

Now, under script tag in VisualForce page write the following code.

JScript function for fixed haeders

JScript function for fixed haeders

Based on how you are going to populate the table, be it on commandbutton’s click or through other means, call the “ApplyFixHeaders” function on its onclick or oncomplete as per your requirement. Now, for your pageblock table add a property styleclass and its value as “fixheaders”.

Applying styleclass to table

Applying styleclass to table

Once, you have completed all the above mentioned steps, you can go ahead and test the functionality. In addition to this, if you are dealing with large records you can easily implement a navigation bar at the bottom of the table which would be helpful in navigating the records.

Fixed header table

Fixed header table

If you wish to acquire more details on how to customize the columns, their width, how to keep the first column fixed and so on, visit this link Scrollable fixed header table jquery plugin. If you want further source related information to the fixed headers please visit this link- TableFixedHeader.

About Us
Greytrix as a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners across the globe. We offers Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that requires apex code incorporation into the Salesforce platform.

Greytrix has some unique solutions for Cloud CRM such as Salesforce integration with Sage Enterprise Management (Sage X3), Sage Intacct, Sage 100 and Sage 300 (Sage Accpac). We also offer best-in-class Cloud CRM Salesforce customization and development services along with services such as Salesforce Data Migration, Integrated App development, Custom App development and Technical Support to business partners and end users.

Greytrix GUMU™ integration for Sage ERP – Salesforce is a 5-star app listed on Salesforce AppExchange.

For more information, please contact us at salesforce@greytrix.com. We will be glad to assist you.

Related Posts