jQuery表格排序组件-tablesorter使用示例

当我们需要对表格进行排序时，可以使用jQuery表格排序组件-tablesorter。在本文中，我们将提供一个完整的攻略介绍，包含以下几个方面：

安装和引入 tablesorter

可以通过以下两种方式来安装和引入 tablesorter：

1. 通过下载 tablesorter.js 文件并引入到 HTML 中：

```html

```

1. 使用类似 npm、bower 这样的包管理工具下载：

bash
npm install tablesorter
```html

```

创建表格并应用 tablesorter

为应用 tablesorter，需要调用 tablesorter() 函数，并将其应用到需要排序的表格。示例代码如下：

<table class="tablesorter">
   <!-- 表头 -->
   <thead>
      <tr>
         <th>姓名</th>
         <th>年龄</th>
         <th>性别</th>
      </tr>
   </thead>
   <!-- 表格内容 -->
   <tbody>
      <tr>
         <td>张三</td>
         <td>25</td>
         <td>男</td>
      </tr>
      <tr>
         <td>李四</td>
         <td>31</td>
         <td>男</td>
      </tr>
      <tr>
         <td>王五</td>
         <td>28</td>
         <td>女</td>
      </tr>
   </tbody>
</table>

$(document).ready(function() { 
   $(".tablesorter").tablesorter(); 
}); 

在示例中，为表格添加 tablesorter 类名，并通过 jQuery 选择器调用 tablesorter() 函数进行初始化。

需要注意的是，如果表格中存在不需要排序的列，可以通过 data-sorter="false" 添加到 <th> 中来禁用排序功能。

设置 tablesorter 的配置项

可以通过向 tablesorter() 函数传递一个配置对象来自定义 tablesorter 的行为。例如，可以使用 sortList 设置默认的排序列和排序方式：

$(document).ready(function() { 
   $(".tablesorter").tablesorter({ 
      sortList: [[1,0]] 
   }); 
});

在示例中，通过传递 { sortList: [[1,0]] } 作为配置来将第二列设置为默认的排序列，同时按照升序排序。配置 sortList 是一个二维数组，其中第一维代表需要排序的列的索引，第二维代表排序方式，0 为升序，1 为降序，默认为升序。

示例1：添加自定义的数据解析器

当 tablesorter 发现表格中的数据类型与默认类型不符时，表格将不能正常排序。这时，我们需要使用 tablesorter 提供的 自定义数据解析器(cube, dayOfMonth, dd-MMM-yyyy, 十六进制等)，或者自己编写数据解析器。

以下是一个使用 tablesorter 自带解析器 cube 的例子：

<table class="tablesorter">
   <!-- 表头 -->
   <thead>
      <tr>
         <th>名称</th>
         <th>价格</th>
      </tr>
   </thead>
   <!-- 表格内容 -->
   <tbody>
      <tr>
         <td>商品1</td>
         <td>$24.99</td>
      </tr>
      <tr>
         <td>商品2</td>
         <td>£19.99</td>
      </tr>
      <tr>
         <td>商品3</td>
         <td>€49.95</td>
      </tr>
      <tr>
         <td>商品4</td>
         <td>¥499.50</td>
      </tr>
   </tbody>
</table>

$(document).ready(function() { 
   $(".tablesorter").tablesorter({
      headers: {
         1: {
            sorter: 'currency' //使用 cube 数据解析器
         }
      }
   }); 
}); 

在示例中，为第二列添加了 headers 属性，并使用了 tablesorter 提供的一种名称为 currency 的数据解析器 cube。

示例2：使用 tablesorter 插件

除了 tablesorter 自带的功能外，也可以使用第三方的 tablesorter 插件扩展其功能。以下是一个使用 tablesorter-widgets 插件的例子：

<table class="tablesorter">
   <!-- 表头 -->
   <thead>
      <tr>
         <th>名称</th>
         <th>价格</th>
      </tr>
   </thead>
   <!-- 表格内容 -->
   <tbody>
      <tr>
         <td>商品2</td>
         <td>$19.99</td>
      </tr>
      <tr>
         <td>商品1</td>
         <td>$24.99</td>
      </tr>
      <tr>
         <td>商品3</td>
         <td>$49.95</td>
      </tr>
      <tr>
         <td>商品4</td>
         <td>$499.50</td>
      </tr>
   </tbody>
</table>

$(document).ready(function() { 
   $(".tablesorter").tablesorter({
      widgets: ['zebra', 'columns']
   }); 
}); 

在示例中，使用了 tablesorter-widgets 提供的两个插件：striped 去除表格的奇偶行颜色、columns 在多列排序时优化排序体验。这些插件可以通过传递一个数组['zebra', 'columns'] 或一个包含配置选项的对象实现。