JS实现的点击表头排序功能示例

下面是详细的攻略：

什么是点击表头排序功能？

点击表头排序是一种JavaScript编写的功能，在表格中点击表头时，可以按照表头所指向的列数据的大小为依据，对表格的行进行排序的功能。

代码实现

以下是一份实现点击表头排序功能的代码示例，其中使用jQuery库和ES6箭头函数：

// 获取表格
var table = $('table.sortable');

// 获取表格头部（第一行）
var thead = table.find('thead tr');

// 获取表格数据（不包括表头）
var tbody = table.find('tbody');

// 为每一个表头添加点击事件
thead.find('th').click(function() {
  var columnIndex = $(this).index(); // 获取所点击表头的列数
  var sortDirection;

  // 判断该列的排序方向（升序或降序）
  if($(this).hasClass('asc')) {
    sortDirection = 'desc';
  } else if($(this).hasClass('desc')) {
    sortDirection = 'asc';
  } else {
    sortDirection = 'asc';
  }

  // 清除其他列的排序样式
  $(this).siblings().removeClass('asc desc');

  // 根据表头的排序方向和列数，对tbody的行进行排序
  var rows = $.makeArray(tbody.find('tr'));
  rows.sort(function(a, b) {
    var aVal = $(a).find('td').eq(columnIndex).text().trim();
    var bVal = $(b).find('td').eq(columnIndex).text().trim();

    // 对比两个值的大小，返回排序结果
    return aVal.localeCompare(bVal, 'zh-Hans-CN', {numeric: true, sensitivity: 'accent'}) * (sortDirection == 'asc' ? 1 : -1);
  });

  // 将排序后的结果重新添加到tbody中
  tbody.html(rows);

  // 添加排序样式到该列表头上
  $(this).addClass(sortDirection);
});

代码解析

接下来，我们对上文代码做一下简单的分析：

查询DOM元素

首先，我们用jQuery库来查询DOM元素，获取到了我们需要的table、thead和tbody元素，并使用了ES6箭头函数简化了代码：

var table = $('table.sortable');
var thead = table.find('thead tr');
var tbody = table.find('tbody');

这里需要注意的是，我们只对class为"sortable"的表格添加点击表头排序功能，以防止对页面上其他表格造成影响。

点击表头

接下来，我们对表头添加点击事件，并获取了所点击表头的列数(columnIndex)以及需要进行的排序方向(sortDirection)：

thead.find('th').click(function() {
  var columnIndex = $(this).index();

  if($(this).hasClass('asc')) {
    sortDirection = 'desc';
  } else if($(this).hasClass('desc')) {
    sortDirection = 'asc';
  } else {
    sortDirection = 'asc';
  }
});

其中，如果所点击表头已经存在升序（"asc"）或降序（"desc"）样式，则对应地改变排序方向，否则默认为升序。

清除其他列排序样式

为了避免同时拥有多个排序样式，我们需要在点击某一列时，清除其他列的排序样式：

$(this).siblings().removeClass('asc desc');

排序

接下来，我们使用了JavaScript的sort()函数对tbody的行进行排序，同时做了一些值类型的比较：

var rows = $.makeArray(tbody.find('tr'));
rows.sort(function(a, b) {
  var aVal = $(a).find('td').eq(columnIndex).text().trim();
  var bVal = $(b).find('td').eq(columnIndex).text().trim();

  return aVal.localeCompare(bVal, 'zh-Hans-CN', {numeric: true, sensitivity: 'accent'}) * (sortDirection == 'asc' ? 1 : -1);
});

其中，我们使用了$.makeArray()函数将tbody中的行转换为数组类型，并使用了String.prototype.trim()函数去除值的头尾空格。

注：aVal.localeCompare(bVal)的作用是将两个字符串进行比较，返回预期的排序结果，{numeric: true, sensitivity: 'accent'}的作用是进行本地化排序，保证特定语言的字符排序方式是正确的。

同时，在运算的过程中，我们根据表头的排序方向和列数，确定了排序结果。

重新排列tbody

最后，我们将排序后的结果重新添加到tbody中，并在所点击列头上添加排序样式：

tbody.html(rows);
$(this).addClass(sortDirection);

示例说明

示例一

比如我们有一个表格，里面有三列（"name"、"age"、"email"），初始状态下按"email"列进行升序排序。此时代码应为：

<thead>
  <tr>
    <th>name</th>
    <th>age</th>
    <th class="asc">email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>foo</td>
    <td>23</td>
    <td>[e-mail]</td>
  </tr>
  <tr>
    <td>bar</td>
    <td>46</td>
    <td>[e-mail]</td>
  </tr>
  ...
</tbody>

现在我们点击"age"列，则表格应该按照"age"列进行升序排序，代码应为：

<thead>
  <tr>
    <th>name</th>
    <th class="asc">age</th>
    <th>email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>jane</td>
    <td>20</td>
    <td>[e-mail]</td>
  </tr>
  <tr>
    <td>elen</td>
    <td>30</td>
    <td>[e-mail]</td>
  </tr>
  ...
</tbody>

示例二

如果我们有一个表格，里面的数据是中文拼音，而且前面有数字序号，此时排序可能会出现错误，比如1. rose排在10. apple前面。此时应该对比数字大小而非字符，代码中应该加上{numeric: true}参数，例如：

return aVal.localeCompare(bVal, 'zh-Hans-CN', {numeric: true, sensitivity: 'accent'}) * (sortDirection == 'asc' ? 1 : -1);

这样，我们就可以做到根据所点击表头的列数，对表格的行进行升序或降序排列，并避免了中文拼音排序错误的问题。

希望以上文本能够对你有所帮助。