Tag Archives: PageBlockTable

Highlight Selected Row in a table in Visualforce Page

Here is an example to highlight the selected row in a page block table in visualforce page. To do this add the below code snippet to your visualforce page to highlight the selected row color among the rest of the rows in same page block table.

Visualforce Page:

<apex:page standardController="Account" recordSetVar="Accounts" sidebar="false" showHeader="false">  
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>  
    <style>
        .ui-state-active{
        border: 1px solid #fbd850;
        background: rgb(199,199,199);
        font-weight: bold;
        color: #eb8f00;
        }
    </style> 
    <script>  
    function highlightRow(row){  
        $('tr').removeClass('ui-state-active');  
        $(row).parent().addClass('ui-state-active');  
    }  
    </script>  
    <apex:form >  
        <apex:pageBlock >  
            <apex:pageBlockTable value="{!accounts}" var="a">  
                <apex:column value="{!a.Name}" onclick="highlightRow(this)"/>  
                <apex:column value="{!a.AccountNumber}" onclick="highlightRow(this)"/>
                <apex:column value="{!a.Type}" onclick="highlightRow(this)"/>  
                <apex:column value="{!a.Industry}" onclick="highlightRow(this)"/>  
                <apex:column value="{!a.Phone}" onclick="highlightRow(this)"/>  
            </apex:pageBlockTable>  
        </apex:pageBlock>  
    </apex:form>    
</apex:page>  

Output:

Note: If you want to change the Highlighted color, you can write your won style class.

Dynamically Add Rows in Apex PageBlockTable

Controller:

public class Sample{
    
    Account acc = new Account();
    public List<Account> accList { get; set; }
    
    public Sample()
    {
        accList = new List<Account>();
        accList.add(acc);
    }
    
    Public void addAccount()
    {
        Account ac = new Account();
        accList.add(ac);
    }
}

Visualforce Page:

<apex:page Controller="Sample">
    <apex:form>
        <apex:pageBlock id="pbAcc">
            <apex:pageblockSection >
                <apex:pageBlockTable value="{!accList}" var="acc">
                    <apex:column headerValue="Account Name">
                        <apex:inputField value="{!acc.Name}"/>
                    </apex:column>
                    <apex:column headerValue="Account Number">
                        <apex:inputField value="{!acc.AccountNumber}"/>
                    </apex:column>
                    <apex:column headerValue="Account Type">
                        <apex:inputField value="{!acc.Type}"/>
                    </apex:column>
                    <apex:column headerValue="Industry">
                        <apex:inputField value="{!acc.Industry}"/>
                    </apex:column>
                </apex:pageBlockTable>
                <br/><apex:commandLink value="Add Row" action="{!addAccount}" reRender="pbAcc"/>   
            </apex:pageblockSection>        
            <apex:pageblockSection columns="1" >
                <apex:pageblockSectionItem >
                    <apex:commandButton value="Save" />
                    <apex:commandButton value="Cancel" />
                </apex:pageblockSectionItem>         
            </apex:pageblockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Output:

Difference Between Pageblocktable, Datatable And Repeat in Salesforce

PageBlockTable:

  • PageBlockTable should be define inside apex:pageblock or apex:pageblocksection
  • PageBlockTable uses standard page styles
  • PageBlockTable has the required attribute “value”
  • Column headers will be displayed automatically

DataTable:

  • No need to write inside apex:pageblock or apex:pageblocksection
  • There is no required attribute value
  • The data can be displayed using custom styles
  • We need to specify column headers explicitly

Repeat:

  • No Salesforce styles inherited, no need to use apex:column
  • Simply data displayed in irregular format
  • You can have full control over rendering data