我正在尝试按日期对表格进行排序,但它在Chrome和Mozilla浏览器中无效?
<article>
<div style="margin-bottom: 10px;">
<label for="dept" class="lbl-title">Select Department :</label> <select
name="dept" id="dept" class="select_dept">
<option value="">All</option>
<option value="DEPT-1">Information Technology Department</option>
<option value="DEPT-2">Networking Department</option>
<option value="DEPT-3">Testing Department</option>
<option value="DEPT-4">Account Department</option>
<option value="DEPT-5">Sales Department</option>
<option value="DEPT-6">Marketing Department</option>
</select>
</div>
<table class="table" id="tbl-dept" border="1">
<thead>
<tr>
<th class="layout-1">Department Name</th>
<th>Description</th>
<th class="layout-1" id="sort"
style="cursor: pointer; background: red;">Date
<span class="arrow">⇅</span></a><input type="hidden"
id="sort-direction" value="SORT_ASC" />
</th>
</tr>
</thead>
<tbody>
<tr class="DEPT-1">
<td>Information Technology Department</td>
<td>Sample description</td>
<td>06 May, 2015</td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr class="DEPT-2">
<td>Networking Department</td>
<td>Sample description</td>
<td>02 May, 2015</td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr class="DEPT-3">
<td>Testing Department</td>
<td>Sample description</td>
<td>05 May, 2015</td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr class="DEPT-4">
<td>Account Department</td>
<td>Sample Description</td>
<td>01 May, 2015</td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr class="DEPT-5">
<td>Sales Department</td>
<td>Sample Description</td>
<td>03 May, 2015</td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr class="DEPT-5">
<td>Marketing Department</td>
<td>Sample Description</td>
<td>04 May, 2015</td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a href="#">Link</a></td>
<td> </td>
</tr>
</tbody>
</table>
</article>
$(document).ready(function(){
$("#sort").on("click",function (e) {
e.preventDefault();
if ($("#sort-direction").val() === "SORT_ASC") {
$('#tbl-dept tbody tr').sort(function (a, b) {
return new Date($(a).find('td:eq(2)').text()).getTime() - new Date($(b).find('td:eq(2)').text()).getTime();
}).appendTo('#tbl-dept tbody');
$("#sort-direction").val("SORT_DESC");
} else {
$('#tbl-dept tbody tr').sort(function (a, b) {
return new Date($(b).find('td:eq(2)').text()).getTime() - new Date($(a).find('td:eq(2)').text()).getTime();
}).appendTo('#tbl-dept tbody');
$("#sort-direction").val("SORT_ASC");
}
});
$("#dept").on("change", function () {
var cls = $(this).val();
if (cls === "") {
$("#tbl-dept tbody tr").show();
} else {
$("#tbl-dept tbody tr").hide();
$("#tbl-dept tbody tr." + cls).show();
}
});
});
答案 0 :(得分:3)
您需要在Firefox中使用调试器并检查排序比较器功能。检查您的日期值是否为NaN
。 (使用isNaN
)。
我已经简化并修复了您的代码。
NaN
值并设置为明确的内容,例如Infinity
。答案 1 :(得分:1)
问题是Date在文本为空时返回NaN(Chrome似乎更灵活),这会导致排序失败。您可以将当前的排序更改为:
new Date($(tr).find('td:eq(2)').text()).getTime() || 0
|| 0确保返回一个数字。最好是拥有辅助功能,这样你就不会重复编码,也不必改变每次出现的事情。
示例Fiddle