+ Start a Discussion
DoondiDoondi 

why am not able to Sorting arrow's?

Below is my simple VF page and I have used tablesorter plug in, (http://tablesorter.com/docs/)
It's working fine but I am not able to get/see Sorting arrows.
<apex:page standardController="Property__c" showHeader="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" lightningStylesheets="true">
    <apex:includeScript value="{!$Resource.latest}"/>
    <apex:includeScript value="{!$Resource.tablesorter}"/>
    <apex:includeScript value="{!$Resource.metadata}"/>
    <apex:includeScript value="{!$Resource.tablesortermin}"/>
    <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" />
    <script type="text/javascript">
    $j = jQuery.noConflict();    
    $j(document).ready(function () {
    $j("[id$=theaddrs]").tablesorter();
    });    
    </script>
    <script>
    $j(document).ready(function() 
                      { 
                          $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
                      } 
                     ); 
    </script>
    <script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
    <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 
    <apex:form >
    <apex:includeScript value="{!$Resource.svg4everybody}"/>
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <apex:slds />
        </head>
        <body>
            <div class="slds-scope">
                <div class="myapp">
                    <div class="slds-grid slds-m-top_large">
                        <div class="slds-col slds-col_rule-right slds-p-right_large slds-size_12-of-12">
                            <apex:pageblock mode="details" id="theaddrsblock" >
                                    <apex:pageBlockTable value="{!Property__c}" var="index" styleclass="fixme" id="theaddrs" styleClass="tablesorter" headerClass="header">
                                        <apex:column value="{!index.Name}" >
                                        </apex:column>          
                                        <apex:column value="{!index.Phone__c}">
                                        </apex:column>
                                        <apex:column value="{!index.LandMark__c}">
                                        </apex:column> 
                                        <apex:column value="{!index.Block__c}">
                                        </apex:column> 
                                        <apex:column value="{!index.Rent__c}">
                                        </apex:column>
                                    </apex:pageBlockTable>
                                </apex:pageblock>                                  
                        </div>
                    </div>
                </div>
            </div> 
        </body>
    </html>
        </apex:form> 
</apex:page>

 
Best Answer chosen by Doondi
Khan AnasKhan Anas (Salesforce Developers) 
Hi Doondi,

Yes, this one is the correct plugin.
Did you rename your zip file?
If not please rename __jquery.tablesorter.zip to tablesorter.zip  then upload it to the static resource with name TablesorterZip.


Regards,
Khan Anas

All Answers

Anil GiriAnil Giri
Hi Doondi,
PageblockTable create runtime ID while vfpage convert into HTML.
you need to add HTML table instead of apex:pageBlockTable.

<apex:pageBlockTable value="{!Property__c}" var="index" styleclass="fixme" id="theaddrs" styleClass="tablesorter" headerClass="header">
                                        <apex:column value="{!index.Name}" >
                                        </apex:column>          
                                        <apex:column value="{!index.Phone__c}">
                                        </apex:column>
                                        <apex:column value="{!index.LandMark__c}">
                                        </apex:column> 
                                        <apex:column value="{!index.Block__c}">
                                        </apex:column> 
                                        <apex:column value="{!index.Rent__c}">
                                        </apex:column>
                                    </apex:pageBlockTable>
                                    
                                    
                                    
Replace above  the code with following code:

<table id="myTable" class="tablesorter"> 
<thead> 
    <tr> 
        <th>Last Name</th> 
        <th>Phone</th> 
        <th>LandMark</th> 
        <th>Block</th> 
        <th>Rent</th> 
    </tr> 
</thead> 
<tbody> 
    <apex:repeat value="{!Property__c}" var="prop">
        <tr> 
            <td><apex:outputText value="{!prop.Name}"/></td> 
            <td><apex:outputText value="{!prop.Phone__c}"/></td> 
            <td><apex:outputText value="{!prop.LandMark__c}"/></td> 
            <td><apex:outputText value="{!prop.Block__c}" /></td> 
            <td><apex:outputText value="{!prop.Rent__c}" /></td> 
        </tr> 
        
    </apex:repeat>
</tbody> 
</table> 


and 
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );

replace with
$j("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );

try to keep singel ready function in your Vf page 
$j(document).ready(function()
)};


Regards,
Anil
Khan AnasKhan Anas (Salesforce Developers) 
Hi Doondi,

I trust you are doing very well.

Please upload whole ZIP in the static resource with a name tablesorterzip. It is better to have all the necessary files in one package.

Now include this in your code:
 
<apex:stylesheet value="{!URLFOR($Resource.tablesorterzip, 'themes/blue/style.css')}"/>

Table sorter has theme blue with arrows images. I did some changes and it is working fine.

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas
DoondiDoondi
Hi, Anil,
Am able to do Sorting but not able get the sorting arrow's
DoondiDoondi
Hi Khan Anas,
I am good and hope you too doing well,
I tried your suggestion, but still didn't get arrow's.
Khan AnasKhan Anas (Salesforce Developers) 
Hi Doondi,

I am very well, thank you.

You can try the below code, I have checked in my org and it is working fine.
 
<apex:page standardController="Account" recordSetVar="acc" showHeader="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" lightningStylesheets="true">
    
    <apex:includeScript value="{!$Resource.latest}"/>
    <apex:includeScript value="{!$Resource.tablesorter}"/>
    <apex:includeScript value="{!$Resource.metadata}"/>
    <apex:includeScript value="{!$Resource.tablesortermin}"/>
    <apex:stylesheet value="{!URLFOR($Resource.Tablesorterzip, 'themes/blue/style.css')}"/>
    <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" />
    
    <script type="text/javascript">
    $j = jQuery.noConflict();    
    $j(document).ready(function () {
        $j("[id$=theaddrs]").tablesorter();
    });    
    </script>
    
    <script>
    $j(document).ready(function() 
                       { 
                           $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
                       } 
                      ); 
    </script>

    <apex:form >       
        <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
            <head>
                <meta charset="utf-8" />
                <meta http-equiv="x-ua-compatible" content="ie=edge" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <apex:slds />
            </head>
            <body>
                <div class="slds-scope">
                    <div class="myapp">
                        <div class="slds-grid slds-m-top_large">
                            <div class="slds-col slds-col_rule-right slds-p-right_large slds-size_12-of-12">
                                <apex:pageblock mode="details" id="theaddrsblock" >
                                    <apex:pageBlockTable value="{!acc}" var="index" styleclass="fixme" id="theaddrs" styleClass="tablesorter" headerClass="header">
                                        <apex:column value="{!index.Name}" >
                                        </apex:column>          
                                        <apex:column value="{!index.Phone}">
                                        </apex:column>
                                        <apex:column value="{!index.Rating}">
                                        </apex:column> 
                                        <apex:column value="{!index.Type}">
                                        </apex:column> 
                                    </apex:pageBlockTable>
                                </apex:pageblock>                                  
                            </div>
                        </div>
                    </div>
                </div> 
            </body>
        </html>
    </apex:form> 
</apex:page>

Don't forget to upload TableSorter zip file in the static resource with a name Tablesorterzip.


Screenshot:
User-added image

 I hope it helps you.

Thanks and regards,
Khan Anas
DoondiDoondi
Hi, Khan, 
I am Sorry to say, I am still not able to get the arrow's.
Below is my code and screen shot with Inspect (F12)
<apex:page standardController="Account" recordSetVar="acc" showHeader="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" lightningStylesheets="true">
    
    <apex:includeScript value="{!$Resource.latest}"/>
    <apex:includeScript value="{!$Resource.tablesorter}"/>
    <apex:includeScript value="{!$Resource.metadata}"/>
    <apex:includeScript value="{!$Resource.tablesortermin}"/>
    <apex:stylesheet value="{!URLFOR($Resource.Tablesorterzip, 'themes/blue/style.css')}"/>
    <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" />
    
    <script type="text/javascript">
    $j = jQuery.noConflict();    
    $j(document).ready(function () {
        $j("[id$=theaddrs]").tablesorter();
    });    
    </script>
    
    <script>
    $j(document).ready(function() 
                       { 
                           $j("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
                       } 
                      ); 
    </script>

    <apex:form >       
        <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
            <head>
                <meta charset="utf-8" />
                <meta http-equiv="x-ua-compatible" content="ie=edge" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <apex:slds />
            </head>
            <body>
                <div class="slds-scope">
                    <div class="myapp">
                        <div class="slds-grid slds-m-top_large">
                            <div class="slds-col slds-col_rule-right slds-p-right_large slds-size_12-of-12">
                                <apex:pageblock mode="details" id="theaddrsblock" >
                                    <apex:pageBlockTable value="{!acc}" var="index" styleclass="fixme" id="theaddrs" styleClass="tablesorter" headerClass="header">
                                        <apex:column value="{!index.Name}" >
                                        </apex:column>          
                                        <apex:column value="{!index.Phone}">
                                        </apex:column>
                                        <apex:column value="{!index.Rating}">
                                        </apex:column> 
                                        <apex:column value="{!index.Type}">
                                        </apex:column> 
                                    </apex:pageBlockTable>
                                </apex:pageblock>                                  
                            </div>
                        </div>
                    </div>
                </div> 
            </body>
        </html>
    </apex:form> 
</apex:page>

SortingArrowMissing
DoondiDoondi
from this URL
http://tablesorter.com/docs/
I have downloaded the link (red color) and updated in static resource as TablesorterZip
download

Hope this is the correct plugin ? 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Doondi,

Yes, this one is the correct plugin.
Did you rename your zip file?
If not please rename __jquery.tablesorter.zip to tablesorter.zip  then upload it to the static resource with name TablesorterZip.


Regards,
Khan Anas
This was selected as the best answer
DoondiDoondi
@Khan Anas,
Thanks a ton, 
a simple underscore has took away my 10 hours of time :-) 
Jammu VamsiJammu Vamsi
I'm not able to download the file from this URL
http://tablesorter.com/docs/
can u please suggest to me where I can download the file?