可使用 AJAX 排序的 jQuery

在开发 Web 应用程序时，经常需要使用表格来显示数据。其中一个常见的需求是，让用户能够按照某个列进行升序或降序排序。在本文中，我们将学习如何使用 jQuery 和 AJAX 来实现这一目标。

技术选型

本文将使用以下技术和库：

• HTML、CSS 和 JavaScript：Web 开发的基本技术。
• jQuery：一个流行的 JavaScript 库，封装了许多常用的 DOM 操作和 AJAX 功能。
• PHP：一门流行的服务器端编程语言，用于处理 AJAX 请求并返回数据。

目标

我们的目标是实现以下功能：

• 在一个 HTML 表格中显示数据。
• 允许用户按照某个列进行排序（升序或降序）。
• 使用 AJAX 技术来实现排序，而不是重新加载整个页面。
• 显示排序的进度指示器，让用户知道何时排序完成。

在本文中，我们将分步骤实现这些目标。您可以按照步骤一步步来，或者跳过部分内容。

步骤 1：显示数据表格

首先，我们需要创建一个 HTML 表格来显示数据。这里我们将使用一个简单的表格，其中包含三列：姓名、年龄和城市。

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>35</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

接下来，我们将使用 jQuery 来使表格具有排序功能。

步骤 2：实现客户端排序

在客户端（即用户的浏览器中），我们可以使用 jQuery 的 .sort() 方法来对表格中的行进行排序。为了便于排序，我们将每行的数据打包成一个 JavaScript 对象，并将它们放入一个数组中。代码如下：

var rows = [];
$("#myTable tbody tr").each(function() {
  var name = $(this).find("td").eq(0).text();
  var age = $(this).find("td").eq(1).text();
  var city = $(this).find("td").eq(2).text();
  rows.push({ name: name, age: age, city: city });
});

这里我们使用了 jQuery 的 .each() 方法来遍历表格的每一行，然后使用 .find() 和 .eq() 方法来找到每列的值。最后，我们将每行的数据打包成一个对象，并将其添加到 rows 数组中。

接下来，我们可以使用 .sort() 方法对 rows 数组中的对象进行排序。为了使排序能够根据指定的列进行排序，我们将为每个列创建一个排序函数，如下所示：

function compareName(a, b) {
  return a.name.localeCompare(b.name);
}

function compareAge(a, b) {
  return a.age - b.age;
}

function compareCity(a, b) {
  return a.city.localeCompare(b.city);
}

这里的比较函数分别基于名字、年龄和城市对两个对象进行比较。对于名字和城市，我们使用 .localeCompare() 方法来进行字符串比较；对于年龄，我们简单地通过减法来比较数字。

最后，我们可以使用 .sort() 方法来对 rows 数组进行排序。为了触发排序，我们可以为表头中的每个列添加一个单击事件监听器，并在其中调用排序函数。

var currentSort = "none";
$("#myTable thead th").click(function() {
  var sortColumn = $(this).index();
  var newSort = "asc";
  if (currentSort === "asc") {
    newSort = "desc";
  }
  rows.sort(sortFunctions[sortColumn]);
  if (newSort === "desc") {
    rows.reverse();
  }
  currentSort = newSort;
  renderTable();
});

这里，我们定义了一个 currentSort 变量，用于跟踪当前的排序状态。然后为表头中的每个列添加了一个单击事件。在事件处理程序中，我们获取当前单击的列索引，使用 sortFunctions 对象调用正确的比较函数，并在必要时翻转结果。最后，我们更新 currentSort 变量，然后调用 renderTable() 函数来更新表格。renderTable() 函数将根据 rows 数组中的数据重新构建表格。

function renderTable() {
  $("#myTable tbody").empty();
  for (var i = 0; i < rows.length; i++) {
    var row = "<tr>" +
      "<td>" + rows[i].name + "</td>" +
      "<td>" + rows[i].age + "</td>" +
      "<td>" + rows[i].city + "</td>" +
      "</tr>";
    $("#myTable tbody").append(row);
  }
}

现在，当用户单击表头中的每个列时，我们都会在客户端重新排序表格。但由于每次排序都需要重新渲染整个表格，这会导致性能下降。

步骤 3：使用 AJAX 排序

为了避免在客户端进行重新渲染，我们可以使用 AJAX 技术将排序请求发送到服务器，并获取已排序的数据。首先，我们需要在服务器端创建一个 PHP 脚本来接受 AJAX 请求，排序数据，并将结果返回给客户端。

<?php
header("Content-Type: application/json");

$rows = array(
  array("name" => "张三", "age" => 28, "city" => "北京"),
  array("name" => "李四", "age" => 35, "city" => "上海"),
  array("name" => "王五", "age" => 22, "city" => "广州")
);

$sortColumn = $_GET["column"];
$sortOrder = $_GET["order"];

if ($sortColumn === "name") {
  usort($rows, function($a, $b) use ($sortOrder) {
    $result = strnatcmp($a["name"], $b["name"]);
    if ($sortOrder === "desc") {
      $result = -$result;
    }
    return $result;
  });
} elseif ($sortColumn === "age") {
  usort($rows, function($a, $b) use ($sortOrder) {
    $result = $a["age"] - $b["age"];
    if ($sortOrder === "desc") {
      $result = -$result;
    }
    return $result;
  });
} elseif ($sortColumn === "city") {
  usort($rows, function($a, $b) use ($sortOrder) {
    $result = strnatcmp($a["city"], $b["city"]);
    if ($sortOrder === "desc") {
      $result = -$result;
    }
    return $result;
  });
}

echo json_encode($rows);
?>

这里我们首先获取客户端传递过来的 column 和 order 参数，然后使用 usort() 函数根据指定的列和排序顺序对数据进行排序。注意，这里需要使用 use 关键字将 $sortOrder 变量传递给匿名函数。最后，我们使用 json_encode() 函数将排序后的数据转换为 JSON 格式，并将其发送回客户端。

在客户端，我们需要修改我们的代码以便使用 AJAX 排序。请注意，在实现 AJAX 排序之前，请确保您有可以运行 PHP 的 Web 服务器。

var sortUrl = "sort.php";

$("#myTable thead th").click(function() {
  var sortColumn = $(this).attr("data-column");
  var newOrder = "asc";
  if (currentSort.column === sortColumn && currentSort.order === "asc") {
    newOrder = "desc";
  }
  currentSort.column = sortColumn;
  currentSort.order = newOrder;
  $("#loader").show();
  $.get(sortUrl, { column: sortColumn, order: newOrder })
    .done(function(rows) {
      currentRows = rows;
      renderTable();
      $("#loader").hide();
    })
    .fail(function() {
      alert("排序失败，请重试。");
      $("#loader").hide();
    });
});

这里，我们添加了一个名为 sortUrl 的变量，用于存储 PHP 排序脚本的 URL。然后，我们使用 .attr() 方法来获取单击列的 data-column 属性，它应该与服务器端排序脚本中相应的列名匹配。

接下来，我们创建了一个名为 currentSort 的对象，用于跟踪当前的排序状态。在单击事件处理程序中，我们更新这个对象，并向服务器发送 AJAX 请求。我们使用 jQuery 的 .get() 方法来发送 GET 请求，并传递 column 和 order 参数。一旦我们收到服务器的响应，我们将更新 currentRows 变量，然后调用 renderTable() 函数来更新表格。

同时，我们显示了一个进度指示器（具有 ID 为 loader 的元素），以让用户知道何时排序完成。

需要注意的是，我们在请求失败时显示了一个警告框。在生产环境中，您可能需要使用更复杂的错误处理方法。

步骤 4：展示进度指示器

最后，我们可以展示一个进度指示器来提示用户何时排序完成。我们已经在 AJAX 调用中实现了这一点，现在只需要在 HTML 中添加一个元素来显示进度指示器，然后使用 CSS 样式来设置其外观。

<div id="loader">
  <div class="spinner"></div>
  排序中...
</div>

这里，我们使用了一个带有 ID 为 loader 的 DIV 元素来包含进度指示器。DIV 元素包含一个名为 spinner 的子元素，它可以是 GIF 动画或使用 CSS 动画。在这里，我们使用了简单的 CSS 动画：

#loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.75);
  z-index: 9999;
  display: none;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.8);
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

这里，我们首先定义了 #loader 元素的样式，使其覆盖整个页面并使用半透明白色背景。然后，我们使用 .spinner 类定义了一个圆形 DIV，它具有 5px 的边框和半透明背景。我们还定义了一个 CSS 动画，使其旋转。最后，我们在 #loader 元素中显示了“排序中...”文本。

现在，当用户单击表头中的每个列时，我们都会显示一个进度指示器，让用户知道何时排序完成。

总结

在本文中，我们学习了如何使用 jQuery 和 AJAX 技术来实现一个支持客户端和服务器端排序的数据表格。我们实现了客户端排序和 AJAX 排序，并使用了进度指示器以增强用户体验。

需要注意的是，本文中的示例代码仅用于说明如何实现所述功能，可能需要根据实际情况进行修改和优化。同时，我们推荐使用一些流行的前端框架，如 React、Angular 和 Vue 等，来使 Web 开发更加高效。