jquery实现表格本地排序的方法

下面是详细讲解 “jQuery实现表格本地排序的方法”的完整攻略。

1. 准备工作

首先，需要在你的HTML页面中添加jQuery库的引用，你可以通过以下代码在文档的头部引入jQuery（注：以下代码使用jQuery 3.6.0版本）：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

除此之外，你还需要有一个HTML表格元素，其中需要添加以下属性：

• 用于指定表头的 thead 元素
• 用于存放表格数据的 tbody 元素
• 每一个表格头部单元格都需要添加一个 data-sort-type 属性，用于指定该列的排序类型（支持 string、number、date 三种类型）

一个简单的示例如下：

<table>
  <thead>
    <tr>
      <th data-sort-type="string">Name</th>
      <th data-sort-type="number">Age</th>
      <th data-sort-type="date">Birthday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>1996-01-01</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>20</td>
      <td>2001-05-12</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>30</td>
      <td>1991-12-30</td>
    </tr>
  </tbody>
</table>

2. 排序功能实现

接下来，需要编写JavaScript代码实现表格的排序功能。

首先，需要使用 jQuery 选择表头的单元格元素，并为每个表头单元格注册点击事件。在点击事件触发时，获取当前单元格所在列的数据，并根据 data-sort-type 属性指定的类型进行排序。

以下是实现代码：

// 获取表格列数据数组
function getColumnData(table, columnIndex, dataType) {
  const columnData = [];
  table.find(`tbody tr td:nth-child(${columnIndex + 1})`).each(function() {
    let value;
    if (dataType === 'number') {
      value = parseFloat($(this).text());
    }
    else if (dataType === 'date') {
      value = new Date($(this).text()).getTime();
    }
    else {
      value = $(this).text();
    }
    columnData.push(value);
  });
  return columnData;
}

// 为表头单元格注册点击事件
$('table th').on('click', function() {
  const columnIndex = $(this).index();
  const dataType = $(this).data('sort-type');
  const columnData = getColumnData($('table'), columnIndex, dataType);

  // 根据不同的排序类型使用不同的函数进行排序
  if (dataType === 'number') {
    columnData.sort((a, b) => a - b);
  }
  else if (dataType === 'date') {
    columnData.sort((a, b) => a - b);
  }
  else {
    columnData.sort();
  }

  // 根据排序后的结果更新表格内容
  const rows = $('table tbody tr').toArray();
  columnData.forEach((value, index) => {
    const row = rows[index];
    $(row).children().eq(columnIndex).text(value);
  });
});

在上面的示例代码中，我们分别实现了 getColumnData 和 $('table th').on('click', ...) 两个函数：

• getColumnData 函数用于获取表格中某一列的数据，返回一个数组。在这个函数中，我们使用 jQuery 的 find 方法查找 tbody 中单元格所具有的 columnIndex + 1 对应的列的元素，并根据 dataType 的值进行数据解析转换。
• $('table th').on('click', ...) 函数用于注册表头单元格的点击事件。在事件回调函数中，我们先通过 jQuery 的 index 方法获取当前单元格所在列的索引值，并使用 data 属性获取该列的排序类型。接着，使用 getColumnData 函数获取当前列的数据，再根据 dataType 的值使用不同的排序函数进行排序。最后，将排序后的结果更新到表格中。

3. 示例

现在，我们演示一下表格本地排序的过程，以一个数据为准：

<table>
  <thead>
    <tr>
      <th data-sort-type="string">Name</th>
      <th data-sort-type="number">Age</th>
      <th data-sort-type="date">Birthday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>1999-01-01</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>20</td>
      <td>2001-05-12</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>30</td>
      <td>1995-12-30</td>
    </tr>
  </tbody>
</table>

点击表头中 “Name” 列的单元格，将按照字典序进行升序排序，排序结果如下：

<table>
  <thead>
    <tr>
      <th data-sort-type="string">Name</th>
      <th data-sort-type="number">Age</th>
      <th data-sort-type="date">Birthday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>20</td>
      <td>2001-05-12</td>
    </tr>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>1999-01-01</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>30</td>
      <td>1995-12-30</td>
    </tr>
  </tbody>
</table>

再次点击表头中 “Name” 列的单元格，将按照字典序进行降序排序，排序结果如下：

<table>
  <thead>
    <tr>
      <th data-sort-type="string">Name</th>
      <th data-sort-type="number">Age</th>
      <th data-sort-type="date">Birthday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tom</td>
      <td>30</td>
      <td>1995-12-30</td>
    </tr>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>1999-01-01</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>20</td>
      <td>2001-05-12</td>
    </tr>
  </tbody>
</table>

再点击 “Age” 列的单元格，将按照数字大小进行升序排序，排序结果如下：

<table>
  <thead>
    <tr>
      <th data-sort-type="string">Name</th>
      <th data-sort-type="number">Age</th>
      <th data-sort-type="date">Birthday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>20</td>
      <td>2001-05-12</td>
    </tr>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>1999-01-01</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>30</td>
      <td>1995-12-30</td>
    </tr>
  </tbody>
</table>

最后，再点击 “Birthday” 列的单元格，将按照日期进行升序排序，排序结果如下：

<table>
  <thead>
    <tr>
      <th data-sort-type="string">Name</th>
      <th data-sort-type="number">Age</th>
      <th data-sort-type="date">Birthday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tom</td>
      <td>30</td>
      <td>1995-12-30</td>
    </tr>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>1999-01-01</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>20</td>
      <td>2001-05-12</td>
    </tr>
  </tbody>
</table>

通过上述步骤，我们完成了本地表格的排序操作，希望这个攻略对你有所帮助。