Apex Code Development You need to sign in to do that
Don't have an account?
Sascha Deinert JavaScript TableSorter
Hi,
I want to add the possibility to sort a table in my visualforce. I found the TableSorter JavaScript to add the sortfunction, but I don't know how can I add this to my page. I've download the script http://tablesorter.com/docs/#Download and get a zip-file. I now I have to upload the javascript to my org --> static rescources.
But how to upload the file, zipped? or unzipped? If unzipped, which files are necessary?
Thanks for your help,
Sascha
I want to add the possibility to sort a table in my visualforce. I found the TableSorter JavaScript to add the sortfunction, but I don't know how can I add this to my page. I've download the script http://tablesorter.com/docs/#Download and get a zip-file. I now I have to upload the javascript to my org --> static rescources.
But how to upload the file, zipped? or unzipped? If unzipped, which files are necessary?
Thanks for your help,
Sascha
VF Page :
<apex:page controller="testPageController">
<apex:includeScript value="{!URLFOR($Resource.sorter, '/jquery-latest.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.sorter, '/jquery.tablesorter.min.js')}"/>
<apex:pageBlock>
<apex:pageBlockTable value="{!accList}" var="acc" styleClass="accTable">
<apex:column value="{!acc.Id}"/>
<apex:column value="{!acc.Name}"/>
</apex:pageBlockTable>
</apex:pageBlock>
<script>
$(document).ready(function() {
$(".accTable").tablesorter();
});
</script>
</apex:page>
Controller :
public class testPageController{
public List<Account> accList{get;set;}
public testPageController(){
accList = [select id,name from account];
}
}
Just download the zip file from "http://tablesorter.com/__jquery.tablesorter.zip" , rename the zip file as "sorter.zip" , create a static resource named "sorter" and upload this zip file there then this code will work.
All Answers
You can upload the whole zip file to static resource and can include the script in your page like this.
<apex:includeScript value="{!URLFOR($Resource.LibraryJS, '/base/subdir/file.js')}"/>
if you have and css, then you can import that in your page like this.
<apex:stylesheet value="{!URLFOR($Resource.style_resources, 'styles.css')}"/>
Here "LibraryJS" is your static resource Name and "/base/subdir/file.js" is the path to the JS file or CSS file that you want to import.
I uploaded the file (name: tablesorter) and I I added the line to the visualforce but it doesn't wok. Do you have an idea?
Thanks,
Sascha
<apex:includeScript value="{!URLFOR($Resource.tablesorter, '/base/subdir/file.js')}"/> <script type="text/javascript"> $j = jQuery.noConflict(); $j(document).ready(function () { $j("[id$=theaddrs]").tablesorter(); }); </script> <apex:pageblock title="Unternehmen Übersicht" id="pbAcc"> <apex:pageblockButtons location="top"> <apex:commandButton value="Seite 1" rerender="pbAcc" action="{!FirstPage}" disabled="{!prev}"/> <apex:commandButton value="vorherige Seite" rerender="pbAcc" action="{!previous}" disabled="{!prev}"/> <apex:commandButton value="nächste Seite" rerender="pbAcc" action="{!next}" disabled="{!nxt}"/> <apex:commandButton value="Letzte Seite" rerender="pbAcc" action="{!LastPage}" disabled="{!nxt}"/> </apex:pageblockButtons> <apex:pageblocktable value="{!AccList2}" var="Acc" id="theaddrs" styleclass="tablesorter" headerclass="header" columnswidth="5%, 40%, 15%, 10%, 15%, 15%"> <apex:column headervalue="LINK"> <apex:outputLink target="_blank" value="/{!Acc.Id}">Details</apex:outputLink> </apex:column> <apex:column headervalue="Unternehmen"> <apex:outputField value="{!Acc.Name}" styleclass="header"/> <apex:actionSupport event="onclick" action="{!getOppList}" rerender="pbOpp, pbAccDL, pbAccDR, pbOppD"> <apex:param assignTo="{!SelectedAccountId}" value="{!Acc.Id}" name="SelectedAccountId"/> </apex:actionSupport> </apex:column> </apex:pageblocktable> </apex:pageBlock>Here '/base/subdir/file.js' is the path of your script file of tableSorter inside the zip file. For example. inside zip, if you have folder x -> folder y -> sorter.js then it will be
<apex:includeScript value="{!URLFOR($Resource.tablesorter, '/x/y/sorter.js')}"/>
Try it and let me know if it still doesnt work
Also dont forgot to import jquery
VF Page :
<apex:page controller="testPageController">
<apex:includeScript value="{!URLFOR($Resource.sorter, '/jquery-latest.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.sorter, '/jquery.tablesorter.min.js')}"/>
<apex:pageBlock>
<apex:pageBlockTable value="{!accList}" var="acc" styleClass="accTable">
<apex:column value="{!acc.Id}"/>
<apex:column value="{!acc.Name}"/>
</apex:pageBlockTable>
</apex:pageBlock>
<script>
$(document).ready(function() {
$(".accTable").tablesorter();
});
</script>
</apex:page>
Controller :
public class testPageController{
public List<Account> accList{get;set;}
public testPageController(){
accList = [select id,name from account];
}
}
Just download the zip file from "http://tablesorter.com/__jquery.tablesorter.zip" , rename the zip file as "sorter.zip" , create a static resource named "sorter" and upload this zip file there then this code will work.