1

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

}
1

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!

  • Thanks. I tried incorporating that code, but it doesn't do anything. Perhaps I am adding it incorrectly? I updated my code above to show what I did. – J. Neilan Oct 8 '18 at 18:40
  • 1
    So you can't use the pageBlockTable with this. What you should do is create a regular old HTML Table and apex:repeat. I'll update my answer to include some code. – Charlie123 Oct 8 '18 at 19:50
  • Thanks. My VF Page is actually quite large and already formatted with pageBlockTables. I did end up getting the initial code to work. I was a matter of uploading the entire Zip file and not just the specific JS. – J. Neilan Oct 9 '18 at 12:48
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.