使用Jquery tablesorter对显示为mm / yyyy的列进行排序,以yyyymm顺序排序

时间:2014-01-28 20:22:22

标签: jquery sorting tablesorter

下午好。

我有一个表格,其中的日期以mm / yyyy格式显示。当我单击一列时,我希望列以yyyymm升序或降序显示。我正在使用jquery tablesorter并已阅读我可以使用解析器的地方,但似乎无法获得语法。

任何人都可以对此有所了解吗?

谢谢。

我在外部.js文件中有这个:

 $("#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" }

    ]
});

这是ASPX(InterestStartDate是我要排序的列):

<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>

1 个答案:

答案 0 :(得分:0)

尝试使用此解析器(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'
        }
    }
});