function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
viv1viv1 

Sorting table on header click using jquery ??

 Script :

 

 

<script type="text/javascript">

                $(document).ready(function()
                    {
                        j$("#recurring").tablesorter();
                     
                    }
                );
                    
            </script>

 

My table code ::

<apex:datatable columns="12" id="recurring" styleClass="table table-striped tablesorter"
    value="{!filteredRecurringExpenses}" var="item" >

<div class="outline-body">
    
                                                    
        <apex:column colspan="2">
             <apex:facet name="header">
                 <apex:outputPanel >
                   <apex:outputText value="{!$Label.Date}"/>
                   <apex:outputText styleClass="requiredStyle" value="*"/>
                 </apex:outputPanel>
            </apex:facet>  
             <apex:inputText value="{!item.transactionDate}"  />
         </apex:column>
          

 

 

but my table  is not getting sort according to header ??

does sorting work on facet header ???

bvramkumarbvramkumar

> j$("#recurring").tablesorter();

With this call you might be expecting initialize sorting on the <apex:datatable>. But the Id on <apex:datatable> is always translated into a different Id when it is actually rendered on your browser. So in this case the table Id will not be exactly equal to "recurring". The Id will become a value that contains the word "recurring".

 

But dont worry, Visualforce provides us with a tool called $Component.

 

So in your case.... Your script should be something like below

 

<apex:datatable columns="12" id="recurring" styleClass="table table-striped tablesorter"
    value="{!filteredRecurringExpenses}" var="item" >
<div class="outline-body">                                                        
        <apex:column colspan="2">
             <apex:facet name="header">
                 <apex:outputPanel >
                   <apex:outputText value="{!$Label.Date}"/>
                   <apex:outputText styleClass="requiredStyle" value="*"/>
                 </apex:outputPanel>
            </apex:facet>  
             <apex:inputText value="{!item.transactionDate}"  />
         </apex:column>
<apex:datatable>
<script>
var tableToSort = document.getElementById('{!$Component.recurring}');
$(document).ready(function()
{
  j$(tableToSort).tablesorter();
                     
});
</script>

 

If this still does not work, your <apex:datatable> may not be giving the exact HTML that your jquery plugin is expecting.

 

 

DixitDixit
When searching for id use: $('[id$=recurring]') for jQuery. 
That must help.