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
DoondiDoondi 

tablesorter not sorting $ values properly and reading digits as wrong

Hi,
I am Using TableSorter and it's not sorting $ values properly,
Any suggestion would be a great help.

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

This is my Pageblocktable code: 
<apex:pageblock mode="details" id="theaddrsblock" >
								<apex:pageBlockTable value="{!Records}" var="r" styleclass="fixme" id="theaddrs" styleClass="tablesorter" headerClass="header">
									<apex:column value="{!r.Units__c}"></apex:column>
									<apex:column value="{!r.Annual_Sale__c}" ></apex:column>
									<--10 more colomns here; which are sorting perfectly-->
								</apex:pageBlockTable>
							</apex:pageblock>
This is the output am getting :
sorting
​​​​​​​
Best Answer chosen by Doondi
DoondiDoondi
I figured out the issue, 
In tablesorter plug in we need to change the JS code;
some thing like this; 
this.formatFloat = function (s) {
            s = s.toString();
            var i = parseFloat(s.replace(/[,]/g, ''));
            return (isNaN(i)) ? 0 : i;
        };

 

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Greetings to you!

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement. You can match your code to the below code.

Here, Max_Amount__c is a currency ($) field and it is sorting correctly.
  
<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.Max_Amount__c}">
                                        </apex:column> 
                                        <apex:column value="{!index.Type}">
                                        </apex:column> 
                                    </apex:pageBlockTable>
                                </apex:pageblock>                                  
                            </div>
                        </div>
                    </div>
                </div> 
            </body>
        </html>
    </apex:form> 
</apex:page>


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 the future.

Thanks and Regards,
Khan Anas
DoondiDoondi
Hi Khan Anas  ,
I used the same, even now I am not getting correct values
DoondiDoondi
Hi Khan Anas  ,
I used the same, even now I am not getting correct values;

by the way at line no 20, you used this id (myTable) where have you assigned it?
DoondiDoondi
I figured out the issue, 
In tablesorter plug in we need to change the JS code;
some thing like this; 
this.formatFloat = function (s) {
            s = s.toString();
            var i = parseFloat(s.replace(/[,]/g, ''));
            return (isNaN(i)) ? 0 : i;
        };

 
This was selected as the best answer