Sort by column having <input checkbox> elements

Question

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">
                        <span class="hidden">1</span>
                        <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>

Answer 1

Here is a straight HTML/jQuery/Tablesorter example. My jsFiddle works event though it looks funny. I did not full import the css but the column sort feature is working. https://jsfiddle.net/bindrid/qaut048v/2/

Added second one that looks for the second child here: https://jsfiddle.net/bindrid/qaut048v/4/

here is my script:

    $(document).ready(function () {
        // add parser through the tablesorter addParser method 
        $.tablesorter.addParser({
            // set a unique id 
            id: 'Checkboxes',
            is: function (s) {
                // return false so this parser is not auto detected 
                return false;
            },
            format: function (s, table, cell, cellIndex) {
                // It looks backwards but I did that so that 
                // first click will put the checked up top
                return cell.children[1].checked ? 0 : 1;

            },
            // set type, either numeric or text 
            type: 'numeric'
        });
        $(".tablesorter").tablesorter(
            { 
                headers: { 
                    3: { 
                        sorter:'Checkboxes' 
                    } 
                } 
            }
            );

    });   

Answer 2

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>