订购日期时间ASC/DESC

Question

我有一张日期表

<table>
    <tr>
      <th>Date</th>
    </tr>
    <tr>
      <td>01/03/2018 02:31 AM</td>
    </tr>
    <tr>
      <td>01/13/2018 03:00 AM</td>
    </tr>
    <tr>
       <td>09/02/2017 02:31 AM</td>
    </tr>
    <tr>
       <td>11/29/2017 09:30 PM</td>
    </tr>
    <tr>
      <td>03/01/2018 03:00 AM</td>
    </tr>
</table>

我想按时间顺序点菜。我发现另一个线程推荐使用：

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() }

但输出不能正确地将最新的排序为最旧的。

Date
01/03/2018 02:31 AM
01/13/2018 03:00 AM
03/01/2018 03:00 AM
09/02/2017 02:31 AM
11/29/2017 09:30 PM

Answer 1

这里的问题是必须将单元格值解析为日期格式。稍后，您需要将其重新格式化为区域设置字符串toLocaleString，以便可以使用LocaleCompare函数。

第一个变化：

var valA = getCellValue(a, index), valB = getCellValue(b, index)

致：

var valA = Date.parse(getCellValue(a, index)).toLocaleString(), valB = Date.parse(getCellValue(b, index)).toLocaleString();

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))

    this.asc = !this.asc
    if (this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = Date.parse(getCellValue(a, index)).toLocaleString(), valB = Date.parse(getCellValue(b, index)).toLocaleString();
        //console.log(valA, valB, "____", valA.localeCompare(valB),"_____",valA>valB);
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
    }
}
function getCellValue(row, index){
    return $(row).children('td').eq(index).html();
}

th {
    cursor: pointer;
    background: lightgrey;
}
td, th {
    padding: 5px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
      <th>Date</th>
    </tr>
    <tr>
      <td>01/03/2018 02:31 AM</td>
    </tr>
    <tr>
      <td>01/13/2018 03:00 AM</td>
    </tr>
    <tr>
       <td>09/02/2017 02:31 AM</td>
    </tr>
    <tr>
       <td>11/29/2017 09:30 PM</td>
    </tr>
    <tr>
      <td>03/01/2018 03:00 AM</td>
    </tr>
</table>