到目前为止我已经得到了这段代码:
$('.link-sort-table').click(function(e) {
var $sort = this;
var $table = $('#sort-table');
var $rows = $('tbody > tr', $table);
$rows.sort(function(a, b) {
var keyA = $('td:eq(0)', a).text();
var keyB = $('td:eq(0)', b).text();
if ($($sort).hasClass('asc')) {
return (keyA > keyB) ? 1 : -1;
} else {
return (keyA < keyB) ? 1 : -1;
}
});
$.each($rows, function(index, row) {
$table.append(row);
});
e.preventDefault();
});thead {
color: green;
}
tbody {
color: blue;
}
tfoot {
color: red;
}
table,
th,
td {
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table id="sort-table" cellpadding="5" cellspacing="2" border="0">
<thead>
<tr>
<th align="left">Sort: <a href="#" class="link-sort-table asc">A-Z</a> <a href="#" class="link-sort-table desc">Z-A</a>
</th>
<th>Filme</th>
<th>Seriale</th>
<th>Carti</th>
</tr>
</thead>
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Sprinter Cell</td>
<td>The Martian</td>
<td>My Name is Earl</td>
<td>Harry Potter</td>
</tr>
<tr>
<td>Tomb Raider</td>
<td>Inception</td>
<td>The Big Bang Theory</td>
<td>The Casual Vacancy</td>
</tr>
<tr>
<td>Need for Speer</td>
<td>Ted</td>
<td>Supergirl</td>
<td>Fiddy shades</td>
</tr>
<tr>
<td>Counter Strike</td>
<td>Limitless</td>
<td>One-Punch Man</td>
<td>Morometii</td>
</tr>
<tr>
<td>Half Life</td>
<td>Pixels</td>
<td>Fresh off the boat</td>
<td>i KILL</td>
</tr>
<tr>
<td>FarCry</td>
<td>James Bond</td>
<td>House of Cards</td>
<td>Punguta cu 2 bani</td>
</tr>
<tr>
<td>Dota</td>
<td>Hunger Games</td>
<td>DareDevil</td>
<td>The Ink</td>
</tr>
<tr>
<td>The Adventures Of Van-Helsing</td>
<td>Inception</td>
<td>iZombie</td>
<td>Blackout</td>
</tr>
<tr>
<td>The Hidden</td>
<td>Silver Lining Playbook</td>
<td>Game of Thrones</td>
<td>Twilight</td>
</tr>
<tr>
<td>League of Legends</td>
<td>Predestination</td>
<td>Dexter</td>
<td>The Imitation game</td>
</tr>
</tbody>
</table>
</body>
</html>我需要让它通过按标题对我的列进行升序/降序排序，但我是 jquery 新手，我只是无法弄清楚，而且我找不到仅使用 jquery 对表进行排序的好教程，我不允许使用任何其他插件
最佳答案
使用jQuery.fn创建您自己的函数并扩展它jQuery.fn
var people = [
{ 'myKey': 'Ankit', 'status': 0 },
{ 'myKey': 'Bhavik', 'status': 3 },
{ 'myKey': 'Parth', 'status': 7 },
{ 'myKey': 'Amin', 'status': 9 },
{ 'myKey': 'Russ', 'status': 9 },
{ 'myKey': 'Pete', 'status': 10 },
{ 'myKey': 'Ravi', 'status': 2 },
{ 'myKey': 'Tejas', 'status': 2 },
{ 'myKey': 'Dilip', 'status': 1 },
{ 'myKey': 'Piyush', 'status': 12 }
];
alert("0. At start: " + JSON.stringify(people));
//META.fn: sortData
jQuery.fn.sortData = function (prop, asc) {
return this.sort(function (a, b) {
var x = a[prop];
var y = b[prop];
var retrunStatus = ((x < y) ? 1 : ((x > y) ? -1 : 0));
return (asc==undefined || asc) ? (retrunStatus * -1) : retrunStatus ;
});
}
people2 = $(people).sortData('myKey',false);
alert("1. After sorting (0 to x): " + JSON.stringify(people2));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>从 JSON 生成 HTML，并首先对 JSON 进行排序，然后生成 HTML。
关于jquery - 仅使用 jquery 对表进行排序，无需其他插件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34656053/