Jquery 排序表 -> 文本前的数字



我正在开发一个等待时间API,以显示迪士尼乐园的当前排队时间。 等待时间按字母顺序加载到表中。

现在,我使用以下代码将此表按表顶部的最高等待数到最低等待数对此表进行排序。这就是我想要的:

$(document).ready(function(){
var sorted = $('#mytable tbody tr').sort(function(b, a) {
var a = $(a).find('td:last').text(), b = $(b).find('td:last').text();
return a.localeCompare(b, false, {numeric: true})
})
$('#mytable tbody').html(sorted)
});

这很好用,但正如您在下图中看到的那样,"已关闭"和"翻新"等文本值位于表格顶部,高于最高等待时间。

如何更改表的此顺序以获得表顶部的最高等待时间,最后获得文本值?

当前顺序,想更改此

所以我想得到:

20 min.
15 min.
5 min.
Open
Closed
Refurbishment

要根据需要进行排序,您需要根据值是否为数字进行不同的排序。如果两者都是数字,请像当前一样进行比较。否则,如果只有一个是数字,则将其排序到开头;如果两者都不是数字,则根据所需的顺序(OpenClosedRefurbishment(进行排序,这可以通过在定义排序顺序的对象中查找短语来实现:

var states = {
'Open': 0,
'Closed': 1,
'Refurbishment': 2
};
$(document).ready(function() {
var sorted = $('#mytable tbody tr').sort(function(b, a) {
var a = $(a).find('td:last').text(),
b = $(b).find('td:last').text();
if (!isNaN(parseInt(a))) {
if (!isNaN(parseInt(b))) {
// a and b both numeric
return a.localeCompare(b, false, {
numeric: true
});
} else {
// a numeric, b not, sort b last
return 1;
}
} else if (!isNaN(parseInt(b))) {
// a not numeric, b numeric, sort a last
return -1;
} else {
// a not numeric, b not numeric, sort regular
return states[b] - states[a];
}
});
$('#mytable tbody').html(sorted)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr>
<td>Challenge trails</td>
<td>Refurbishment</td>
</tr>
<tr>
<td>Camp Discovery</td>
<td>Open</td>
</tr>
<tr>
<td>Soaring</td>
<td>120 mins</td>
</tr>
<tr>
<td>Fantasia</td>
<td>20 mins</td>
</tr>
<tr>
<td>Shipwreck Shore</td>
<td>5 mins</td>
</tr>
<tr>
<td>Rex's Racer</td>
<td>105 mins</td>
</tr>
<tr>
<td>Slinky Dog</td>
<td>Closed</td>
</tr>
</tbody>
</table>

最新更新