我正在编写一本jQuery书,目前正在进行表格排序。使用本书中的示例代码,我设置了以下测试场景,当我单击列标题时,它正确地对数据进行单向排序(升序),但是当我再次点击同一列标题时,没有任何反应(我' m期望数据在第二次点击时降序排列)。
有人可以查看下面的示例代码并告诉我为什么会这样吗?
HTML:
<table class="sortable">
<thead>
<tr>
<th class="sort-alpha"><strong>Flat number</strong></th>
<th class="sort-alpha"><strong>Tenant name</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>83</td>
<td>Rachel Prouse</td>
</tr>
<tr>
<td>79</td>
<td>Natalie Charles</td>
</tr>
</tbody>
</table>
jQuery的:
$(document).ready(function () {
$('table.sortable').each(function() {
var $table = $(this);
$('th', $table).each(function(column) {
var $header = $(this);
if ($header.is('.sort-alpha')) {
$header
.addClass('clickable')
.hover(
function() { $header.addClass('hover') },
function() { $header.removeClass('hover');
})
.click(function() {
var rows = $table.find('tbody > tr').get();
rows.sort(function(a, b) {
var keyA = $(a).children('td').eq(column).text().toUpperCase();
var keyB = $(b).children('td').eq(column).text().toUpperCase();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});
});
}
});
});
});
答案 0 :(得分:2)
以下内容会做到这一点。这是一个Working Demo
$(function () {
$('table.sortable').each(function() {
var $table = $(this);
$('th', $table).each(function(column) {
var $header = $(this);
if ($header.hasClass('sort-alpha')) {
$header
.addClass('clickable')
.hover(
function() { $header.addClass('hover') },
function() { $header.removeClass('hover');
})
.click(function() {
$header.hasClass('asc')?
$header.removeClass('asc').addClass('desc'):
$header.removeClass('desc').addClass('asc');
var rows = $table.find('tbody > tr').get();
rows.sort(function(a, b) {
var keyA = $(a).children('td').eq(column).text().toUpperCase();
var keyB = $(b).children('td').eq(column).text().toUpperCase();
if (keyA > keyB) {
return ($header.hasClass('asc')) ? 1 : -1;
}
if (keyA < keyB) {
return ($header.hasClass('asc')) ? -1 : 1;
}
return 0;
});
$.each(rows, function(index, row) {
$table.find('tbody').append(row);
});
});
}
});
});
});
答案 1 :(得分:0)
只需跟踪用户是否再次点击同一列,然后在 $。每个循环
之前执行 rows.reverse();离
if ($(this).hasClass('desc'))
{
rows.reverse();
$(this).removeClass('desc');
}
else
{
$(this).addClass('desc');
}
答案 2 :(得分:0)
sort函数中的return
语句控制排序顺序。也就是说,您需要跟踪列级别的升序或降序,然后相应地更改它们。例如......
var asc = true;
if(asc) { //Ascending
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
}
else { //Descending
if (keyA < keyB) return 1;
if (keyA > keyB) return -1;
}
return 0;