1

I am using a table sorter to sort all the column.All columns are working fine except one column "Rush Request" which has apex:inputcheckbox tag.The column needs to be sortable, i.e. when the column header is clicked, all the checkboxes that are checked needs to bubble up or bubble down.Why its not working correctly.Please Suggest.

Below is my VF Page

<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')}"/>
<apex:stylesheet value="{!URLFOR($Resource.tablesorter, 'themes/blue/style.css')}"/>

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

    });

  //some other unrelated js
    function reInitializeTableSorter() {
        $j("[id$=details]").tablesorter();
    }


</script>

    <apex:form id="theform" >  
     <div style="overflow:auto;height:500px">
     <!-- ******* Section Of Pending milestones whose actual recieved date is not null  ********   -->  
        <apex:pageBlock id="pb1" title="Pending Milestones"> 
            <apex:pageBlockButtons location="top" >
          </apex:pageBlockButtons>

          <apex:outputPanel id="myTable" >
            <apex:pageBlockSection columns="1">      
                <apex:pageBlockTable id="pendingMilestones" value="{!displayList}" var="wrap" rendered="{!DisplayList.size>0}"  styleClass="tablesorter" headerClass="header">
                    <apex:column headerValue="PSS Opportunity #">
                        <apex:outputtext styleClass="header" value="{!wrap.field10}"/>                                 
                    </apex:column>
                    <apex:column headerValue="Status">
                        <apex:outputtext styleClass="header" value="{!wrap.field11}"/>                                 
                    </apex:column>                   
                    </apex:column>

                    <apex:column headerValue="Rush Request">
                        <apex:inputCheckbox value="{!wrap.field13}" styleClass="header" disabled="true" id="checkbox1"/>
                    </apex:column> 
                </apex:pageBlockTable>
                <apex:outputText style="font-style:italic" value="No records to display." rendered="{!DisplayList.size=0}"/>
            </apex:pageBlockSection> 
           </apex:outputPanel> 

        </apex:pageBlock>
  • See the accepted answer to. Jquery Tablesorter - sort by column having <input> elements. – Keith C Jan 2 '17 at 10:42
  • When i am using the <input type =checkbox> instead of <apex:inputcheckbox>, the table show all checkbox as unchecked by default.somehow value="{!wrap.field13}" is not working.Dont know whats the issue – Samir Jan 2 '17 at 10:47
  • 1
    Keep the apex:inputcheckbox; the idea to add a hidden span just before that that the sort sees. – Keith C Jan 2 '17 at 10:49
  • i tried keeping the apex:inputcheckbox; with the span.Still not got the result.I guess i am not able to get the id of the checkbox in the jquery – Samir Jan 2 '17 at 10:59
  • @KeithC do i need to change the jquery too as i am using apex:inputcheckbox – Samir Jan 2 '17 at 11:07
1

Table sorter compares the HTML node value. One thing you can do is add a hidden <apex:outputText just before the checkbox, and add the same value as checkbox. This will be used to sort the column.

<apex:column headerValue="Rush Request">
    <apex:outputText value="{!wrap.field13}" style="display:none;" />
    <apex:inputCheckbox value="{!wrap.field13}" styleClass="header" disabled="true" id="checkbox1"/>
</apex:column>

If you want to sort the table after selecting/de-selecting checkboxes, you have to do something like this. On the click of the checkbox, you have to update the value of <apex:outputText also.

    $j(document).ready(function () {
        $j("[id$=pendingMilestones]").tablesorter();
        $j("input[type='checkbox']").change(function (e) {
            if ($j(this).is(":checked")) { 
                //alert("Checked");
                $j(this).prev().html("true");
            } else {
                //alert("UnChecked");
                $j(this).prev().html("false");
            }
        });
    });

This Stackoverflow link will give more details.

  • Thanks for your answer but this is not working – Samir Jan 2 '17 at 11:49
  • What error you are getting in JavaScript console? – Saroj Bera Jan 2 '17 at 11:52
  • no error.Even the alerts are not getting called.I am not changing the checkboxes.I am just rendering the existing checkbox from the record – Samir Jan 2 '17 at 11:53
  • I guess we cannot use change function as the checkbox that i am displaying are disabled – Samir Jan 2 '17 at 11:55
  • Thanks a lot .I got it to work.Just adding the <apex:outputText value="{!wrap.field13}" style="display:none;" /> solved the problem.table sorter did the rest – Samir Jan 2 '17 at 11:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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