function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
B Jagadeesh 21B Jagadeesh 21 

How to sort Account Columns through custom code in Visualforce page?

Hello Friends !

I wanted to sort Account columns in vf page. Onclick on any of the Account column i wanted to sort from Ascending to Descending and vice-versa.
I'm pasting my requirement in below image.
onclick on Account Name it should sort with upward and down ward  arrow

In the above image onclick of blue color columns i wanted to sort. 
Please provide me best approach other than javascript plugings.

For Better understanding on my requirement please see list view. 


Thanks,
Jagadeesh

Best Answer chosen by B Jagadeesh 21
Prem Anandh 1Prem Anandh 1
Hi Jagadeesh, 

Please check below code. Hope It may help you.

Visualforce page:
 
<apex:page controller="PageBlockTableSortingCon" tabStyle="Account">
<apex:sectionHeader title="Accounts List with Sorting"></apex:sectionHeader>
<apex:form >
<apex:pageBlock title="" id="pageBlock">
    <apex:pageBlockButtons location="top">
      <apex:commandButton value="View" action="{!ViewData}" id="theButton" rerender="pageBlock"></apex:commandButton>
    </apex:pageBlockButtons>
    <apex:pageMessages ></apex:pageMessages>
    <apex:pageBlockTable value="{!accounts}" var="a" rendered="{!NOT(ISNULL(accounts))}">
       <apex:column>
         <apex:facet name="header">   
           <apex:commandLink action="{!ViewData}" value="Account Name{!IF(sortExpression=='name',IF(sortDirection='ASC','▼','▲'),'')}" id="cmdSort">
             <apex:param value="name" name="column" assignTo="{!sortExpression}" ></apex:param>
           </apex:commandLink>
         </apex:facet>
         <apex:outputLink value="/{!a.Id}" target="_blank">{!a.Name}</apex:outputLink>
       </apex:column>
       <apex:column value="{!a.Phone}">
         <apex:facet name="header">
           <apex:commandLink action="{!ViewData}" value="Phone{!IF(sortExpression=='Phone',IF(sortDirection='ASC','▼','▲'),'')}">
             <apex:param value="Phone" name="column" assignTo="{!sortExpression}" ></apex:param>
           </apex:commandLink>
         </apex:facet>
       </apex:column>
        <apex:column value="{!a.BillingCity}">
          <apex:facet name="header">
           <apex:commandLink action="{!ViewData}" value="Billing City{!IF(sortExpression=='BillingCity',IF(sortDirection='ASC','▼','▲'),'')}">
             <apex:param value="BillingCity" name="column" assignTo="{!sortExpression}" ></apex:param>
           </apex:commandLink>
         </apex:facet>
       </apex:column>
        <apex:column value="{!a.BillingCountry}">
          <apex:facet name="header">
           <apex:commandLink action="{!ViewData}" value="Billing Country{!IF(sortExpression=='BillingCountry',IF(sortDirection='ASC','▼','▲'),'')}">
             <apex:param value="BillingCountry" name="column" assignTo="{!sortExpression}" ></apex:param>
           </apex:commandLink>
         </apex:facet>
       </apex:column>
     
    </apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>

Controller:
 
public class PageBlockTableSortingCon {
 
   private List<Account> accounts;
   private String sortDirection = 'ASC';
   private String sortExp = 'name';

   public String sortExpression
   {
     get
     {
        return sortExp;
     }
     set
     {
       //if the column is clicked on then switch between Ascending and Descending modes
       if (value == sortExp)
         sortDirection = (sortDirection == 'ASC')? 'DESC' : 'ASC';
       else
         sortDirection = 'ASC';
       sortExp = value;
     }
   }

 public String getSortDirection()
 {
    //if not column is selected 
    if (sortExpression == null || sortExpression == '')
      return 'ASC';
    else
     return sortDirection;
 }

 public void setSortDirection(String value)
 {  
   sortDirection = value;
 }
  
   public List<Account> getAccounts() {
       return accounts;
   }


   public PageReference ViewData() {
       //build the full sort expression
       string sortFullExp = sortExpression  + ' ' + sortDirection;
      
       //query the database based on the sort expression
       accounts = Database.query('Select id, Name, BillingCity, BillingCountry, Phone from Account order by ' + sortFullExp + ' limit 1000');
       return null;
   }

}

Please let me know. If you are facing any problem. 

Thanks,
Prem Anandh

All Answers

Prem Anandh 1Prem Anandh 1
Hi Jagadeesh, 

Please check below code. Hope It may help you.

Visualforce page:
 
<apex:page controller="PageBlockTableSortingCon" tabStyle="Account">
<apex:sectionHeader title="Accounts List with Sorting"></apex:sectionHeader>
<apex:form >
<apex:pageBlock title="" id="pageBlock">
    <apex:pageBlockButtons location="top">
      <apex:commandButton value="View" action="{!ViewData}" id="theButton" rerender="pageBlock"></apex:commandButton>
    </apex:pageBlockButtons>
    <apex:pageMessages ></apex:pageMessages>
    <apex:pageBlockTable value="{!accounts}" var="a" rendered="{!NOT(ISNULL(accounts))}">
       <apex:column>
         <apex:facet name="header">   
           <apex:commandLink action="{!ViewData}" value="Account Name{!IF(sortExpression=='name',IF(sortDirection='ASC','▼','▲'),'')}" id="cmdSort">
             <apex:param value="name" name="column" assignTo="{!sortExpression}" ></apex:param>
           </apex:commandLink>
         </apex:facet>
         <apex:outputLink value="/{!a.Id}" target="_blank">{!a.Name}</apex:outputLink>
       </apex:column>
       <apex:column value="{!a.Phone}">
         <apex:facet name="header">
           <apex:commandLink action="{!ViewData}" value="Phone{!IF(sortExpression=='Phone',IF(sortDirection='ASC','▼','▲'),'')}">
             <apex:param value="Phone" name="column" assignTo="{!sortExpression}" ></apex:param>
           </apex:commandLink>
         </apex:facet>
       </apex:column>
        <apex:column value="{!a.BillingCity}">
          <apex:facet name="header">
           <apex:commandLink action="{!ViewData}" value="Billing City{!IF(sortExpression=='BillingCity',IF(sortDirection='ASC','▼','▲'),'')}">
             <apex:param value="BillingCity" name="column" assignTo="{!sortExpression}" ></apex:param>
           </apex:commandLink>
         </apex:facet>
       </apex:column>
        <apex:column value="{!a.BillingCountry}">
          <apex:facet name="header">
           <apex:commandLink action="{!ViewData}" value="Billing Country{!IF(sortExpression=='BillingCountry',IF(sortDirection='ASC','▼','▲'),'')}">
             <apex:param value="BillingCountry" name="column" assignTo="{!sortExpression}" ></apex:param>
           </apex:commandLink>
         </apex:facet>
       </apex:column>
     
    </apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>

Controller:
 
public class PageBlockTableSortingCon {
 
   private List<Account> accounts;
   private String sortDirection = 'ASC';
   private String sortExp = 'name';

   public String sortExpression
   {
     get
     {
        return sortExp;
     }
     set
     {
       //if the column is clicked on then switch between Ascending and Descending modes
       if (value == sortExp)
         sortDirection = (sortDirection == 'ASC')? 'DESC' : 'ASC';
       else
         sortDirection = 'ASC';
       sortExp = value;
     }
   }

 public String getSortDirection()
 {
    //if not column is selected 
    if (sortExpression == null || sortExpression == '')
      return 'ASC';
    else
     return sortDirection;
 }

 public void setSortDirection(String value)
 {  
   sortDirection = value;
 }
  
   public List<Account> getAccounts() {
       return accounts;
   }


   public PageReference ViewData() {
       //build the full sort expression
       string sortFullExp = sortExpression  + ' ' + sortDirection;
      
       //query the database based on the sort expression
       accounts = Database.query('Select id, Name, BillingCity, BillingCountry, Phone from Account order by ' + sortFullExp + ' limit 1000');
       return null;
   }

}

Please let me know. If you are facing any problem. 

Thanks,
Prem Anandh
This was selected as the best answer
B Jagadeesh 21B Jagadeesh 21

Hi Prem Anand, 

Thanks a lot for your prompt response.

The above suggested is very good. 

 with the help of your code i come to know that through js we can do without  help of controller. 

I'll try through that way.

Thanks once agian !!

Jagadeesh