我有一张日期表
<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
什么时候应该从最新的日期开始。关于如何正确排序的建议?
答案 0 :(得分:0)
这里的问题是必须将单元格值解析为日期格式。稍后您需要将其重新格式化为Locale String %c
,以便您可以使用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;
}
希望这有效。
EDİT:如您所述,要对此进行排序DESC,您还需要再更改一行:
改变这个:
<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>
到此:
if (!this.asc){rows = rows.reverse()}