9

I came across a reusable visualforce component to sort columns in pageblocktable.It works great on other browsers but not in IE and also sorting on currency fields is not working.Has anyone used it? Is there any better way to do sorting of columns?

  • I know this guy, I've asked him to comment here! – Chirag Mehta Jun 27 '14 at 12:45
10

I would have to presume that the problem stems from the data appearing as an actual string to the sorting algorithm, thus producing lexicographical sorting (e.g. sorting as a string). You have plenty of choices to choose from if you want to introduce easy sorting: AngularJS has an orderBy directive, jQuery has a tableSort, module you can add into it (and others, just search for them), as well as most other JS frameworks. Of course, it would be fairly easy to roll your own sorting command in about 20-40 lines of code, as outlined on StackExchange.

Internet Explorer 7 and 8 are shortly losing their support in salesforce.com, and it is generally time to upgrade as developers as a whole work towards supporting standards instead of the browser/feature detection fragmented past spawned by the browser wars. Make sure you're testing your code in IE 9 or, even better, IE 10, which has already dwarfed previous versions, largely thanks to the automatic upgrades provided by Microsoft.

Personally, I would write my own table sorting algorithm using a data attribute or JavaScript function parameter on the header column that would instruct my function to treat the values as either text, numbers, or dates, and parse the values in each column appropriately with some handy regular expressions to strip numbers down to something I could pass into parseFloat, sort the resulting set of data, then re-order the tables. I don't think this would weigh in much over 100 lines of code, tops, given the links I provided above.

6

I have followed the steps in this link and I was able to fix the sorting on my apex:pageblocktable.

It uses the jQuery tablesorter plugin to sort the table client-side.

<apex:page standardController="Opportunity" tabStyle="Opportunity" extensions="myext" id="thepage">
    <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.min.js')}"/>

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

    <apex:pageBlock id="theaddrsblock">
        <apex:pageBlockTable value="{!Addrs}" var="a" id="theaddrs" styleClass="tablesorter" headerClass="header">
            <apex:column>
                <apex:facet name="header">
                    <apex:outputText styleClass="header" value="{!$ObjectType.Address__c.Fields.Street__c.Label}" />
                </apex:facet>
                <apex:outputText value="{!a.Street__c}" />
            </apex:column>
        <!-- the other columns, closing tags, and that's it -->
  • Basicly both your question and answer reference to other sites. You would greatly improve the quality of your posts by putting the component and fix in them so that others users are not forced to navigate elsewhere. – Samuel De Rycke Jan 28 '14 at 21:18
  • 1
    I am trying to use above code apex:component. but its not working – user12198 Oct 8 '14 at 6:03
0

Below code worked for me. Hope this helps!!

2.

<!-- Below CSS is responsible for look and feel of table --> <link
rel="stylesheet" href="{!URLFOR($Resource.Tablesorter,
'/tablesorter-master/themes/blue/style.css')}" type="text/css"
media="print, projection, screen" /> <script type="text/javascript"
language="javascript" src="{!URLFOR($Resource.Tablesorter,
'/tablesorter-master/jquery-latest.js')}" ></script> <script
type="text/javascript" language="javascript"
src="{!URLFOR($Resource.Tablesorter,
'/tablesorter-master/jquery.tablesorter.js')}" ></script>

    <script type="text/javascript">
        $j = jQuery.noConflict();    
        $j(document).ready(function () {
        $j("[id$=myTable]").tablesorter();
        });    
    </script> <apex:form id="MyForm"> <table id="myTable" class="tablesorter"> 
                <thead> 
                <tr> 
                    <th>Field Label 1</th> 
                    <th>Field Label 2</th> 
                    <th>Field Label 3</th> 
                </tr> 
                </thead> 
                <tbody> 
                <apex:repeat value="{!ListofRecords}" var="a">
                <tr> 
                    <td>{!a.FieldAPIName_1__c}</td> 
                    <td>{!a.FieldAPIName_2__c}</td> 
                    <td>{!a.FieldAPIName_3__c}</td> 
                </tr>
                </apex:repeat> 
                </tbody> 
                </table> 

</apex:form> </apex:page>
  • Welcome to salesforce.stackexchange Anand, it's good to see you participating and sharing an answer. Code is always nice to see, but maybe it would help more if you can also explain it ? – Samuel De Rycke Feb 27 '15 at 17:23
  • Thanks Samuel. I tried implementing the code using "apex:pageblockTable" and "apex:datatable" as per the code posted on this question. Unfortunately the sorting didn't work. I read the documentation at "tablesorter plugin website" and it seems plugin expects tags "<thead>" in generated HTML (which I incorporated in code posted). Secondly I found the CSS responsible for display within "tablesorter-master/themes/blue/style.css". Below SRC are referenced in my code: '/tablesorter-master/jquery-latest.js')}" '/tablesorter-master/jquery.tablesorter.js' Rest of the code is straight forward – Anand Singh Feb 27 '15 at 21:38

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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