table中点击表头实现排序的功能示例介绍

实现table中点击表头实现排序的功能是一个常见的需求，通过JavaScript和jQuery实现非常方便。下面是具体的步骤和代码示例。

实现table中点击表头实现排序的功能是一个常见的需求，通过JavaScript和jQuery实现非常方便。下面是具体的步骤和代码示例。

1. HTML结构

首先需要在HTML中定义一个table，并将需要进行排序的数据展示在其中。其中，包括表头和表身两个部分。示例代码如下：

<table id="myTable">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>18</td>
      <td>92</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>20</td>
      <td>86</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>22</td>
      <td>78</td>
    </tr>
  </tbody>
</table>

2. JS代码

接着，需要通过JavaScript/JQuery实现点击表头排序的功能。具体的步骤如下：

步骤1. 点击表头获取列的索引和排序方式

// 获取表头
var th = $('table#myTable th');
// 给每个表头绑定点击事件
th.click(function(){
  // 获取当前点击的列的索引
  var index = $(this).index();
  // 获取当前点击的列的排序方式，如果已有sort-up/sort-down样式，则切换排序方式
  var sort = $(this).attr('class');
  if(sort == 'sort-down'){
    $(this).removeClass('sort-down');
    $(this).addClass('sort-up');
  } else {
    $(this).removeClass('sort-up');
    $(this).addClass('sort-down');
  }
});

步骤2. 根据索引和排序方式进行排序

// 获取表格数据
var tbody = $('table#myTable tbody');
// 获取所有的行
var rows = tbody.find('tr');
// 将行转化为数组
var rowsArray = $.makeArray(rows);
// 排序函数
rowsArray.sort(function(row1, row2){
  // 获取每行的列
  var cell1 = $(row1).find('td').eq(index).text();
  var cell2 = $(row2).find('td').eq(index).text();
  // 从表头获取排序方式
  if(sort == 'sort-down'){
    return cell1-cell2;
  } else {
    return cell2-cell1;
  }
});
// 将排序后的结果重新添加到表格中
tbody.empty().append(rowsArray);

3. 示例说明

示例1：按照“成绩”列进行降序排序

<th class="sort-down">成绩</th>

首先，我们给“成绩”表头添加了“sort-down”样式，表示按照“成绩”列进行降序排序。之后，当用户点击表头时，步骤1中的代码将会获取当前点击的表头索引和排序方式。最后，按照步骤2中的代码进行排序并渲染。

示例2：按照“年龄”列进行升序排序

<th>年龄</th>

首先，我们没有给“年龄”表头添加排序样式。因此，最初的数据是按照HTML中的表现顺序进行排序。然而，当用户点击“年龄”表头时，步骤1中的代码将会获取当前点击的表头索引和排序方式。在这个例子中，排序方式为“sort-up”，表示按照“年龄”列进行升序排序。之后，按照步骤2中的代码进行排序并渲染。