在引导程序中排序列 - Html

在网页开发中，我们经常需要对表格中的数据进行排序，以便用户更方便地查看和使用。本文将介绍如何在引导程序中使用 HTML 实现排序列。

环境要求

本文所示的排序列代码适用于以下环境：

• HTML5
• Bootstrap 4
• jQuery 3.4.1

实现步骤

1. 添加布局和样式

首先，我们需要添加表格的 HTML 布局和引导程序的样式。

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col" data-sortable="true">Name</th>
      <th scope="col" data-sortable="true">Age</th>
      <th scope="col" data-sortable="true">Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>23</td>
      <td>Male</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>32</td>
      <td>Female</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Michael</td>
      <td>27</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

表头中，我们需要添加 data-sortable 属性，以标明哪些列需要排序。在表格中添加了一些样例数据，以便测试排序功能。

2. 编写排序逻辑

接下来，我们需要使用 jQuery 编写排序逻辑。我们将在页面加载时执行以下代码：

$(document).ready(function() {
  // 按名称排序
  $('th[data-sortable="true"]:eq(0)').click(function() {
    sortTable(0);
  });

  // 按年龄排序
  $('th[data-sortable="true"]:eq(1)').click(function() {
    sortTable(1);
  });

  // 按性别排序
  $('th[data-sortable="true"]:eq(2)').click(function() {
    sortTable(2);
  });

  // 默认按名称排序
  sortTable(0);
});

我们为每个允许排序的表头单元格添加 click 事件，并调用名为 sortTable 的函数，以实际执行排序操作。

3. 编写排序函数

下面是 sortTable 函数的代码：

function sortTable(columnIndex) {
  var table = $('table');
  var rows = $('tbody > tr', table);

  rows.sort(function(a, b) {
    var aValue = $(a).find('td:eq(' + columnIndex + ')').text();
    var bValue = $(b).find('td:eq(' + columnIndex + ')').text();

    return aValue.localeCompare(bValue);
  });

  $.each(rows, function(index, row) {
    table.append(row);
  });
}

sortTable 函数获取表格中所有行，并使用 jQuery 的 sort 函数根据所选列的值对它们进行重新排序。

sort 函数需要比较两个值，并返回一个负数、零或正数，以指示哪个值更小、相等或更大。在本例中，我们使用 localeCompare 函数比较两个字符串。

最后，我们将排序后的行逐一添加回表格中。

4. 测试代码

我们已经完成了在引导程序中排序列的实现。现在，我们可以在浏览器中加载 HTML 文件以测试它。单击表头中的“Name”、“Age”或“Gender”单元格，即可按所选列排序。单击相同表头单元格，可按相反顺序排序。

结论

使用 HTML、Bootstrap 和 jQuery，我们可以快速创建交互式网页，并为表格添加排序功能。本文示例代码经过实际测试，可在现代浏览器中稳定运行。