在前端開發中，我們經常會遇到需要在表格中進行排序的需求。而 jQuery 是一個非常優秀的 JavaScript 庫，可以輕松地實現這一功能。但在進行表格排序時，我們需要明確哪些表頭可以被排序，因此本文將介紹如何使用 jQuery 實現表格排序，并且實現讓表頭可排序。

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

在上面的代碼中，我們先定義了一個 sortColumns 數組，存儲所有可以排序的列名。然后通過事件委托的方式，監聽表頭的點擊事件，獲取當前點擊的列名，并判斷該列名是否在 sortColumns 數組中。如果不在則說明該列不可排序，直接返回。如果在，則進行排序操作（參考排序方法具體實現）。

最后再附上排序方法的簡單實現，使用數組的 sort 方法進行排序，并利用 HTML5 的 data-* 屬性來記錄當前表格是按照哪個列排序的。

// 定義 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);
}
// 實現排序操作
$('table').on('click', 'th[data-sort]', function() {
var col = $(this).data('sort');
if (sortColumns.indexOf(col) === -1) {
return;
}
sortTable(col);
});