Sorting PageblockTable Columns

Question

I am trying to set up my Visualforce page to allow a user to sort any of the pageblockTable columns. I cam across some JQuery code that is supposed to allow this to occur. I am not familiar with JQuery and wonder if anyone can help me figure out why this is saving but not changing anything on my page, or if there is a better way for me to enable a sort of my columns? I uploaded the jquery.tablesorter.min.js file as a Static resource from the tablesorter.com/docs website. The original post I found as here: Sorting apex:pageblocktable from 2015.

VF Page:

<apex:page StandardController="Quote__c" recordSetVar="quotes" Extensions="CalculateQLISummary" action="{!init}" tabStyle="Quote__c">
    <apex:pageMessages id="pgMess" />

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<apex:includeScript value="{!URLFOR($Resource.tablesorter, 'jquery.tablesorter.js')}"/>

<script type="text/javascript">
    $j = jQuery.noConflict();    
    $j(document).ready(function () {
    $j("[id$=theaddrs]").tablesorter();
    });    
</script>

    <apex:form id="frmReview" > 

        <apex:PageBlock >

            <apex:pageBlockTable title="Quote Summary" value="{!listQLI}" var="OLI" style="width:100%" id="theaddrs" styleClass="tablesorter" headerClass="header">

                <apex:column>
                    <apex:facet name="header">
                        <apex:outputText styleClass="header" value="{!$ObjectType.Name.Label}"/>
                    </apex:facet>
                    <apex:outputField value="{!OLI.Name}"/>
                </apex:column>
                <apex:column>
                    <apex:facet name="header">
                        <apex:outputText styleClass="header" value="{!$ObjectType.Quote_Code__c.Label}"/>
                    </apex:facet>
                    <apex:outputField value="{!OLI.Quote_Code__c}"/>
                </apex:column>
                <apex:column>
                    <apex:facet name="header">
                        <apex:outputText styleClass="header" value="{!$ObjectType.List_Price__c.Label}"/>
                    </apex:facet>
                    <apex:outputField value="{!OLI.List_Price__c}"/>
                </apex:column>
                <apex:column>
                    <apex:facet name="header">
                        <apex:outputText styleClass="header" value="{!$ObjectType.Final_Price.Label}"/>
                    </apex:facet>
                    <apex:outputField value="{!OLI.Final_Price__c}"/>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Answer 1

In the attached link, the author implemented this functionality using buttons and a controller method to sort.

Please refer this link. Just incase this link disappears for some reason, i'm copying the information here.

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;
   }

}

Answer 2

If you're open to using some JS libraries, https://www.datatables.net/ is a great option. As a default, these tables allow you to sort by column, and have a ton of options for more complicated stuff.

<table id = "theaddrs">
   <thead>
       <tr>
           <th><apex:outputText styleClass="header" value {!$ObjectType.Name.Label}"/></th>
           <th>Other Columns, etc... </th>
       </tr>
   </thead>
   <tbody>
       <apex:repeat value="{!listQLI}" var = "OLI">
           <tr>
              <td><apex:outputField value="{!OLI.Name}"/></td>
              <td><apex:outputField..... ></td>
           </tr> 
        </apex:repeat>
   </tbody>
</table>

You can't use the data tables JS with the built in pageBlockTables, I think because the classes will conflict or something like that. Try using something similar to what I outlined above!

Answer 3

I ended up getting my code to work. It was simply a matter of uploading the entire jquery.tablesorter.zip file as a Static Resource and not just the specific files.