在前端開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到需要在表格中進(jìn)行排序的需求。而 jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 庫(kù)，可以輕松地實(shí)現(xiàn)這一功能。但在進(jìn)行表格排序時(shí)，我們需要明確哪些表頭可以被排序，因此本文將介紹如何使用 jQuery 實(shí)現(xiàn)表格排序，并且實(shí)現(xiàn)讓表頭可排序。

// 在 HTML 中，我們需要為每個(gè)可以排序的表頭添加一個(gè) data-sort 屬性，并設(shè)置為它們對(duì)應(yīng)的列名
<th data-sort="id">編號(hào)</th>
<th data-sort="name">姓名</th>
<th data-sort="age">年齡</th>
<th data-sort="grade">成績(jī)</th>
// 然后在 JS 中，我們先定義一個(gè) sortColumns 數(shù)組，存儲(chǔ)所有可以排序的列名
var sortColumns = ['id', 'name', 'age', 'grade'];
// 再通過(guò)事件委托的方式，監(jiān)聽(tīng)表頭的點(diǎn)擊事件，并在點(diǎn)擊時(shí)獲取當(dāng)前點(diǎn)擊的列名
$('table').on('click', 'th[data-sort]', function() {
var col = $(this).data('sort');
if (sortColumns.indexOf(col) === -1) {
return;
}
// 進(jìn)行排序操作
// ...
});

在上面的代碼中，我們先定義了一個(gè) sortColumns 數(shù)組，存儲(chǔ)所有可以排序的列名。然后通過(guò)事件委托的方式，監(jiān)聽(tīng)表頭的點(diǎn)擊事件，獲取當(dāng)前點(diǎn)擊的列名，并判斷該列名是否在 sortColumns 數(shù)組中。如果不在則說(shuō)明該列不可排序，直接返回。如果在，則進(jìn)行排序操作（參考排序方法具體實(shí)現(xiàn)）。

最后再附上排序方法的簡(jiǎn)單實(shí)現(xiàn)，使用數(shù)組的 sort 方法進(jìn)行排序，并利用 HTML5 的 data-* 屬性來(lái)記錄當(dāng)前表格是按照哪個(gè)列排序的。

// 定義 sortTable() 方法
function sortTable(col) {
$('table').find('tbody tr').sort(function(a, b) {
var numA = Number($(a).find('td[data-col=' + col + ']').text()),
numB = Number($(b).find('td[data-col=' + col + ']').text());
if (isNaN(numA) || isNaN(numB)) {
return $(a).text() > $(b).text() ? 1 : -1;
}
return numA - numB;
}).appendTo('table tbody');
$('table').data('sort-by', col);
}
// 實(shí)現(xiàn)排序操作
$('table').on('click', 'th[data-sort]', function() {
var col = $(this).data('sort');
if (sortColumns.indexOf(col) === -1) {
return;
}
sortTable(col);
});