javascript - 使用 tablesorter 和 <div> 正确排序日期

Question

我正在使用一个使用 s 的表来获取数据。这样做是因为它从数据库中获取信息，出于设计目的，它就是这样做的。 现在我最近让表排序器工作得很好，但我不能让它与日期一起工作，它按天数对行进行排序。我使用的格式是 dd-MMM-yyyy(即 2011 年 10 月 2 日)。 我修改了原始代码，但概念几乎相同。我尝试使用 tablesorter 附带的 addParser() 但我没有运气。

这是 HTML:

<table class="tablesorter">
<thead>
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td id='101' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>20-Oct-2013</div></td>
        <td id='201' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>21-Dec-2013</div></td>
        <td id='301' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>22-Nov-2013</div>&nbsp;<img src="http://miniontours.yzi.me/loading.gif" height="12" width="12"/></td>
        <td id='401' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>23-Oct-2013</div></td></tr>
    <tr>
        <td id='102' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>20-Sep-2013</div></td>
        <td id='202' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>21-Aug-2013</div></td>
        <td id='302' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>22-Jul-2013</div>&nbsp;<img src="http://miniontours.yzi.me/loading.gif" height="12" width="12"/></td>
        <td id='402' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>23-Jun-2013</div></td>
    </tr>
        <tr>
        <td id='103' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>20-Apr-2013</div></td>
        <td id='203' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>21-Mar-2013</div></td>
        <td id='303' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>22-Feb-2013</div>&nbsp;<img src="http://miniontours.yzi.me/loading.gif" height="12" width="12"/></td>
        <td id='403' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>23-Jan-2013</div></td>
    </tr><tr>
        <td id='104' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>03-Jan-2013</div></td>
        <td id='204' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>11-Oct-2013</div></td>
        <td id='304' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>30-Jun-2013</div>&nbsp;<img src="http://miniontours.yzi.me/loading.gif" height="12" width="12"/></td>
        <td id='404' contenteditable='true'><div class='boxes' contenteditable='true' maxLength='11' style='display:inline' vAlign='center'>12-Sep-2013</div></td>
    </tr>
</tbody>

这是调用我正在使用的表排序器的 JS:

$('table').tablesorter({
    // include zeba widgets
    widgets: ['zebra'],
    // initial sort
    sortList: [[0, 0], [2, 0]]
});

这是更新后的 jsFiddle: http://jsfiddle.net/Q22Yj/9/ 只需尝试对其进行排序，看看如何没有一个日期被正确排序

Answer 1

根据documentation您可以在表排序器的构造函数中为此类列提供日期格式。

 headers: {

        0: {
            sorter: "shortDate",
            dateFormat: "dd-MMM-yyyy"
        },
        1: {
            sorter: "shortDate",
            dateFormat: "dd-MMM-yyyy"
        },
        2: {
            sorter: "shortDate",
            dateFormat: "dd-MMM-yyyy"
        },
        3: {
            sorter: "shortDate",
            dateFormat: "dd-MMM-yyyy"
        },

    },

在这种情况下，由于您使用的是有效的分隔符，您还可以执行以下操作:

 headers: {
        0: {
            sorter: "shortDate"
        },
        1: {
            sorter: "shortDate"
        },
        2: {
            sorter: "shortDate"
        },
        3: {
            sorter: "shortDate"
        },

    },

<强> Demo