您好，我正在使用 jquery 在单击“th”标签时对表格进行排序，我的代码运行良好，但仅适用于数字和单词，但不适用于日期，代码中是否有任何问题:
<table>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>b</td>
<td>13/03/1998</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>02/01/2005</td>
</tr>
<tr>
<td>2</td>
<td>c</td>
<td>10/12/2022</td>
</tr>
</tbody>
</table>
和js:
$(document).on('click', 'th', 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();
}
table.children('tbody').empty().html(rows);
});
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).text();
}
提前谢谢
最佳答案
按照目前的编写，您的代码将每个日期视为一个字符串，并按字母数字顺序而不是按时间顺序对其进行排序。
假设你的日期都使用dd/mm/yyyy格式，那么你可以将日期字符串重新排列成数字格式yyyymmdd，这样适合排序:
function reformatDate(val) {
return val.substring(6, 10) + val.substring(3, 5) + val.substring(0, 2);
}
您可以通过检查列索引在 comparer() 函数中使用此函数:
if ( index === 2 ) {
valA = reformatDate(valA);
valB = reformatDate(valB);
console.log(valA, valB);
}
演示:
$(document).on('click', 'th', 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();
}
table.children('tbody').empty().html(rows);
});
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index),
valB = getCellValue(b, index);
if ( index === 2 ) {
valA = reformatDate(valA);
valB = reformatDate(valB);
//console.log(valA, valB);
}
return $.isNumeric(valA) && $.isNumeric(valB) ?
valA - valB : valA.localeCompare(valB);
};
}
function getCellValue(row, index) {
return $(row).children('td').eq(index).text();
}
function reformatDate(val) {
return val.substring(6, 10) + val.substring(3, 5) + val.substring(0, 2);
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style>
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>b</td>
<td>13/03/1998</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>02/01/2005</td>
</tr>
<tr>
<td>2</td>
<td>c</td>
<td>10/12/2022</td>
</tr>
</tbody>
</table>
</body>
</html>这种方法将您的约束“没有插件”表示除了 jQuery 之外没有任何其他插件，这是您问题中的代码所暗示的。
关于javascript - 没有插件的 jquery 排序表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72378999/