12.1　排序表格行

本章所要讨论的主要内容可以通过对表格行进行排序来演示说明。对表格行进行排序是一种非常有用的技巧，可以帮助用户迅速找到他们想找的信息。自然，实现排序的方式也不止一种。

12.1.1　服务器端排序

在服务器端排序数据是一种常见的方式。表格中的数据经常来自数据库，因而在取得这些数据时，服务器端代码可以按照指定顺序来取得（例如，使用SQL语言的ORDER BY子句）。如果我们有修改服务器端代码的权限，那么以一个合理的顺序展示数据是很直观的。

不过，如果能够让用户自己来排序的话，那么排序功能就更方便了。为此，经常可以看到类似下面的用户界面：让用户点击表头（<th>）中的链接来按照指定的列排序表格数据。这些链接都指向当前页面，但后面附加的查询字符串则用来表示作为排序依据的列：

<table id="my-data">
  <thead>
    <tr>
      <th class="name">
        <a href="index.php?sort=name">Name</a>
      </th>
      <th class="date">
        <a href="index.php?sort=date">Date</a>
      </th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

服务器在接收到查询字符串之后，会根据此字符串从数据库中以不同顺序取得内容。

12.1.2　Ajax排序

服务器排序的页面倒是简单，但每次排序都得刷新页面。我们知道，jQuery提供的Ajax方法可以帮我们避免页面刷新。如果像前面那样设置好了表头中的链接，那么可以通过jQuery把那些链接转换为Ajax请求：

$(document).ready(function() {
  $('#my-data th a').click(function(event) {
    event.preventDefault();
    $('#my-data tbody').load($(this).attr('href'));
  });
});

这样，再单击链接时，jQuery会向同一个页面发送一次Ajax请求。在jQuery使用Ajax向一个页面发送请求时，它会为XMLHttpRequest对象设置值X-Requested-With的HTTP头部，以便服务器知道到来的是一次Ajax请求。当这个参数存在时，服务器端代码只会返回<tbody>元素自身的内容，而不是返回整个页面。这样，我们就可以使用服务器的响应来替换现有<tbody>元素的内容。

实际上，这也是一个渐进增强的例子。这个页面在浏览器不支持JavaScript的情况下照样能够正常运行，因为服务器端排序的链接仍然有效。而在JavaScript可用时，Ajax就会拦截页面请求，实现无须刷新整个页面的排序功能。

12.1.3　JavaScript排序

有时候，我们可能不想在排序的时候等待服务器响应，或者根本就没有服务器端脚本。在这种情况下，可行的方案就是在浏览器中使用JavaScript客户端脚本和jQuery的DOM操作方法来排序。

为了演示不同的技术，本章将探讨三种jQuery排序机制。每一种都能实现相同的目标，但每一种技术的实现方式都不一样，包括：

• 根据从HTML内容中提取的内容排序；

• 根据HTML5自定义数据属性排序；

• 根据表格数据的JSON表示排序。

例子中使用的表格根据相应的JavaScript技术不同会包含不同的HTML结构，但总地来说，它们都包含图书名称列、作者列、出版日期列和定价列。第一个表格的结构很简单：

<table id="t-1" class="sortable">
  <thead>
    <tr>
      <th></th>
      <th class="sort-alpha">Title</th>
      <th class="sort-alpha">Author(s)</th>
      <th class="sort-date">Publish Date</th>
      <th class="sort-numeric">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img src="images/2862_OS.jpg" alt="Drupal 7"></td>
      <td>Drupal 7</td>
      <td>David <span class="sort-key">Mercer</span></td>
      <td>September 2010</td>
      <td>$44.99</td>
    </tr>
    <!--其他代码-->
  </tbody>
</table>

　下载示例代码

如同本书其他HTML、CSS以及JavaScript示例一样，上面的标记只是完整文档的一个片段。如果读者想试一试这些示例，可以从以下地址下载完整的示例代码： Packt Publishing 网站 http://www.packtpub.com/support ，或者本书网站 http://book.learningjquery.com/。

在使用JavaScript增强这个表格之前，我们先来看看它前几行的外观，如图12-1所示。

图　12-1