You need to sign in to do that
Don't have an account?
Doondi
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.
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>
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
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
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:
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
Am able to do Sorting but not able get the sorting arrow's
I am good and hope you too doing well,
I tried your suggestion, but still didn't get arrow's.
I am very well, thank you.
You can try the below code, I have checked in my org and it is working fine.
Don't forget to upload TableSorter zip file in the static resource with a name Tablesorterzip.
Screenshot:
I hope it helps you.
Thanks and regards,
Khan Anas
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)
http://tablesorter.com/docs/
I have downloaded the link (red color) and updated in static resource as TablesorterZip
Hope this is the correct plugin ?
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
Thanks a ton,
a simple underscore has took away my 10 hours of time :-)
http://tablesorter.com/docs/
can u please suggest to me where I can download the file?