在升序和降序之间切换对列进行排序
Posted
技术标签:
【中文标题】在升序和降序之间切换对列进行排序【英文标题】：Toggle sorting a column between ascending and descending 【发布时间】：2012-10-14 22:37:21 【问题描述】：假设我有一个包含字段的表格
Rank、Id和Name
点击 Rank 后，表格会使用此代码按等级升序排序
$(function()
$("#rank").click(function()
var rows = $("#rank_table tbody tr").get();
rows.sort(sortTable);
$.each(rows, function(index, row)
$("#rank_table").children("tbody").append(row);
);
);
);
function sortTable(a, b)
var A = parseInt($(a).children('td').eq(0).text());
var B = parseInt($(b).children('td').eq(0).text());
if (A < B) return -1;
if (A > B) return 1;
return 0;
Rank 和 Id 是整数，id 分别为 rank 和 st_id。
所以，我想要实现的是，当我单击 Rank 字段一次时，表格会按升序排序，再次单击它会按降序对表格进行排序。
我想对rank 和Id 这两个字段都这样做。对于降序，我是否需要使用其他函数而不是升序这个升序函数。
如何使用 jQuery 和 sort() function(not plugins) 来实现这一点？
这里是html
<!Doctype html>
<html>
<head>
<style>
#thead
cursor: pointer;
text-decoration: underline;
text-align: center;
#tbody
text-align: center;
</style>
<script src="libs/jquery-1.5.1.js" type="text/javascript"></script>
<script src="table_sort.js" type="text/javascript"></script>
</head>
<body>
<table id="rank_table">
<thead id="thead">
<tr>
<th id="rank">Rank</th>
<th id="st_id">Student_id</th>
<th id="st_name">Name</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>3</td>
<td>2</td>
<td>Ted</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>5</td>
<td>4</td>
<td>Neil</td>
</tr>
<tr>
<td>1</td>
<td>5</td>
<td>Alex</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>Nave</td>
</tr>
</tbody>
</table>
</body>
</html>
【问题讨论】：
最简单的方法是在您的可排序列上设置一个数据属性或类名，以指示它当前的排序方式。然后，在您的点击处理程序中，检查当前排序是什么并选择当时使用的排序函数（并更新属性/类）。 类似@Shmiddtycode if($("#rank")).hasClass('desc')) return (A == B ? 0 : (A > B ? 1 ：-1））； $("#rank").removeClass('desc'); $("#rank").addClass('asc'); else return (A == B ? 0 : (A > B ? 1 : -1)); $("#rank").removeClass('asc'); $("#rank").addClass('desc'); code
当它应该按降序排序时，可以像调用rows.reverse()一样简单。
是的，这是一个很好的选择。
【参考方案1】：
我可能会将其重写为：http://jsfiddle.net/gQNPt/1/
$(".sortable").click(function()
var o = $(this).hasClass('asc') ? 'desc' : 'asc';
$('.sortable').removeClass('asc').removeClass('desc');
$(this).addClass(o);
var colIndex = $(this).prevAll().length;
var tbod = $(this).closest("table").find("tbody");
var rows = tbod.find("tr");
rows.sort(function(a,b)
var A = $(a).find("td").eq(colIndex).text();
var B = $(b).find("td").eq(colIndex).text();
if (!isNaN(A)) A = Number(A);
if (!isNaN(B)) B = Number(B);
return o == 'asc' ? A > B : B > A;
);
$.each(rows, function(index, ele)
tbod.append(ele);
);
);
HTML
<table id="fruits">
<thead>
<tr>
<th class="sortable asc">ID</th>
<th class="sortable">Name</th>
<th class="sortable">Rank</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>Banana</td>
<td>15</td>
</tr>
<tr>
<td>1</td>
<td>Pear</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Orange</td>
<td>6</td>
</tr>
<tr>
<td>3</td>
<td>Apple</td>
<td>14</td>
</tr>
<tr>
<td>4</td>
<td>Mango</td>
<td>99</td>
</tr>
</tbody>
</table>
然后，您可以通过将“可排序”类添加到列标题来控制哪些列是可排序的。
【讨论】：
作为奖励，这可以用于任何格式良好的表格。 我非常需要这样的东西，谢谢分享！【参考方案2】：如果您当前的函数按升序排序，您只需要更改 if 语句即可使其降序排列？
if (A > B) return -1;
if (A < B) return 1;
这是你想要的方式：
$(function()
$("#rank").on('click', function()
var rows = $("#rank_table tbody tr").get();
rows.sort(sortTable);
$.each(rows, function(index, row)
$("#rank_table").children("tbody").append(row);
);
if (ascending)
ascending = false;
else
ascending = true;
);
);
var ascending = false;
function sortTable(a, b)
var A = parseInt($(a).children('td').eq(0).text(), 10);
var B = parseInt($(b).children('td').eq(0).text(), 10);
if (ascending)
if (A > B) return 1;
if (A < B) return -1;
else
if (A > B) return -1;
if (A < B) return 1;
return 0;
【讨论】：
我知道，但是如何使“排名”按钮切换到此功能 它应该可以工作，但不知道为什么它不工作，列没有按降序排序。 能否请您也添加用于此目的的 html？ @Alonso 嘿伙计，检查我的最终编辑。我已经对其进行了测试，现在可以使用：jsbin.com/iqefoz/2/editif (ascending) ascending = false; else ascending = true; 呃...ascending = !ascending?以上是关于在升序和降序之间切换对列进行排序的主要内容，如果未能解决你的问题，请参考以下文章