Question

我使用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>

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

$('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

使用tablesorter和<div> s </div>正确排序日期

1 个答案: