Use Jquery tablesorter to sort column displayed as mm/yyyy to sort in yyyymm order

Question

Good afternoon all.

I have a table that has a column with dates displayed in mm/yyyy format. When I click a column, I would like column displayed in yyyymm ascending or descending order. I am using jquery tablesorter and have read where I could use a parser for this but can't seem to get the syntax.

Can anyone shed some light on this?

Thank you.

I have this in my external .js file:

 $("#adminInterestInformationTable").tablesorter({ headers: { 5: { sorter: "yyyymm" } } });

 var oTable = $("#adminInterestInformationTable").dataTable({
    //"sScrollY": tableHeight + "px",
    "bPaginate": false,
    "bFilter": false,
    "bInfo": true,
    "bStateSave": true,
    "bAutoWidth": true,
    //"oLanguage": { "sEmptyTable": "No Public Assistance" },
    "oLanguage": { "sEmptyTable": "No Interest" },
    "aoColumns": [
        { "bSortable": false, "sWidth": "5px" },
        { "sWidth": "15px" },
        { "sWidth": "20px" },
        { "sWidth": "20px" },
        { "sWidth": "20px" },
        { "iDataSort": 7, "sWidth": "20px" },  //Override and Sort to the 8th column
        { "iDataSort": 8, "sWidth": "20px" },  //Override and Sort to the 9th column
        { "bVisible": false, "sWidth": "50px" },
        { "bVisible": false, "sWidth": "50px" }

    ]
});

Here is ASPX(InterestStartDate is column I want to sort on):

<table id="adminInterestInformationTable" class="leftNavTable" summary="List of all Interest">
<thead style="background: #0B649F; color: white">
    <tr>
        <th>
            <input type='checkbox' id="selectAllItems" alt="Select all inactive Interest" />
        </th>
        <th>IVD #
        </th>
        <th style="text-align: center">Interest Rate
        </th>
        <th style="text-align: center">Interest Type
        </th>
        <th>Sub Account
        </th>
        <th>Start Date
        </th>
        <th>End Date
        </th>


    </tr>
</thead>
<tfoot>
</tfoot>
<tbody>
    <asp:Repeater ID="InterestListRepeater" runat="server" EnableViewState="true"
        OnItemCommand="InterestList_ItemCommand" OnItemDataBound="InterestList_OnItemDataBound">
        <ItemTemplate>
            <tr id="InterestRepeaterRow" runat="server">

                <td>
                    <input type="checkbox" id="InterestRowCheckbox" name="paymentinterest"       value='<%# DataBinder.Eval(Container.DataItem, "PaymentInterestId") %>'
                        alt='<%# DataBinder.Eval(Container.DataItem, "PaymentInterestId") %>'     runat="server" />
                </td>

                <td>
                    <asp:LinkButton ID="InterestSelectLinkButton" CausesValidation="false"     Style="display: none" runat="server"
                        Text="Select" CommandArgument='<%#DataBinder.Eval    (Container.DataItem, "PaymentInterestID")%>'></asp:LinkButton>

                    <asp:Label ID="IVDNumber" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CaseNumber")%>' />
                </td>
                <td style="text-align: right">
                    <asp:Label ID="InterestRate" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "InterestPercent")%>' />
                </td>
                <td style="text-align: center">
                    <asp:Label ID="InterestType" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "InterestTypeDescription")%>' />
                </td>

                <td>
                    <asp:Label ID="SubAccount" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "SubAccountTypeCd")%>' />
                </td>
                <td>
                    <asp:Label ID="InterestStartDate" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "InterestStartDate")%>' />
                </td>
                <td>
                    <asp:Label ID="InterestEndDate" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "InterestEndDate")%>' />
                </td>
                <td>
                    <asp:Label ID="InterestStartDateSort" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "InterestStartDateOriginal")%>' />
                </td>
                <td>
                    <asp:Label ID="InterestEndDateSort" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "InterestEndDateOriginal")%>' />
                </td>
             </tr>
        </ItemTemplate>
    </asp:Repeater>
</tbody>
</table>

Answer 1

Try this parser (demo):

$.tablesorter.addParser({
    id: "mmyyyy",
    is: function (s) {
        return false;
    },
    format: function (s) {
        var date = s.split('/');
        if (date.length > 1) {
            return new Date(date[1], parseInt(date[0]) - 1).getTime();
        }
        return s;
    },
    type: 'numeric'
});

$('table').tablesorter({
    headers: {
        2: {
            sorter: 'mmyyyy'
        }
    }
});