0

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

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

这是调用我正在使用的tablesorter的JS：

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

这是更新的 jsFiddle： http: //jsfiddle.net/Q22Yj/9/ 去尝试排序，看看如何正确排序日期

4

1 回答 1

2

根据文档，您可以在表排序器的构造函数中为这样的列提供日期格式。

 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"
        },

    },

演示

于 2013-10-21T22:05:16.090 回答