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
AnimeLoverAnimeLover 

How to sort Columns of apex:pageBlockTable in visualforce page

Hi guys thanks for taking interest in my question
Can you please help me in my code I want to sort my apex:pageBlockTable   columns after clicking on that particular column 

here are my APEX and VF code  which is  sorting  only one column but what I want, when I click on a particular  column header that column will sort again I click on same column header it should reverse 
<apex:page standardController="Account" extensions="SAJCustomerContactExt">
<apex:slds />
<style>
.fewerMore { display: none;}
</style>
<apex:pageblock id="CustomList" rendered="{!contacts.size != 0}"> <!---->
<apex:pageBlockTable value="{!contacts}" var="c">
<apex:column headerValue="Contact Name">
<apex:outputLink value="/{!c.id}" id="contactLink" target="_parent">
{!c.Name}
</apex:outputLink>
</apex:column>
<apex:column value="{!c.FirstName}"/>
<apex:column value="{!c.Department}"/>
<apex:column value="{!c.Email}"/>
<apex:column value="{!c.LastName}"/>
<apex:column value="{!c.Phone}"/>
<apex:column value="{!c.Title}"/>
</apex:pageBlockTable>
</apex:pageblock>
</apex:page>

//SAJCustomerContactExt 
public class SAJCustomerContactExt {
    private List<Contact> contacts;
    private Account acct;
    public SAJCustomerContactExt(ApexPages.StandardController stdcontroller) {
        this.acct = (Account)stdcontroller.getRecord();
    }
    public List<Contact> getContacts() {
        contacts =[SELECT Id, Name,FirstName, Department,Email, LastName,Title,  Phone  
                   FROM Contact where AccountId =: acct.ID ORDER BY Name LIMIT 900];
        System.debug('DATA SUCCSESSFULLY QUERIED....! '+contacts);
        return contacts;
    }
    
}

 
Alain CabonAlain Cabon
@Rahul Tandekar 

Here is a simple but very powerful trick when you want to sort the columns with very few lines of code by using jquery and datatables.js

https://datatables.net/
  
<apex:page standardController="Account" extensions="DataTable1">
    <apex:slds />
    <head>
        <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" />
        <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
        <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
    </head>
    <style>
        .fewerMore { display: none;}
    </style>
    <apex:pageblock rendered="{!contacts.size != 0}"> <!---->
        <apex:pageBlockTable id="myTable" value="{!contacts}" var="c">
            <apex:column headerValue="Contact Name">
                <apex:outputLink value="/{!c.id}" id="contactLink" target="_parent">
                    {!c.Name}
                </apex:outputLink>
            </apex:column>
            <apex:column value="{!c.FirstName}"/>
            <apex:column value="{!c.Department}"/>
            <apex:column value="{!c.Email}"/>
            <apex:column value="{!c.LastName}"/>
            <apex:column value="{!c.Phone}"/>
            <apex:column value="{!c.Title}"/>
        </apex:pageBlockTable>
    </apex:pageblock>
    <script>
    $(document).ready( function () {
        $('.list').DataTable();
    });
    </script>
</apex:page>

public class DataTable1 {
    private List<Contact> contacts;
    private Account acct;
    public DataTable1(ApexPages.StandardController stdcontroller) {
        this.acct = (Account)stdcontroller.getRecord();
    }
    public List<Contact> getContacts() {
        contacts =[SELECT Id, Name,FirstName, Department,Email, LastName,Title,  Phone  
                   FROM Contact where AccountId =: acct.ID ORDER BY Name LIMIT 900];
        System.debug('DATA SUCCSESSFULLY QUERIED....! '+contacts);
        return contacts;
    }    
}