Alo*_*nso 7 javascript sorting jquery html-table
假设我有一个包含字段的表
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字段一次时,表格按升序排序,再次点击它按降序对表格进行排序.
我想为fields-都这样做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>
我可能会把它写成这样的东西: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>?
然后,您可以通过向列标题添加"sortable"类来控制哪些列可排序.
如果您当前的函数将其升序排序，您应该只需要更改 if 语句即可使其降序排序？
if (A > B) return -1;
if (A < B) return 1;
这按照你想要的方式工作：
if (A > B) return -1;
if (A < B) return 1;