JQuery插件tablesorter表格排序实现过程解析

简介

tablesorter是一个基于jQuery的表格插件，可以为表格添加排序、分页、高亮、过滤等功能。tablesorter支持多个排序规则，可以对不同列进行不同的排序。本文将详细讲解tablesorter的实现过程。

实现过程

引入jQuery和tablesorter插件

在html中需要引入jQuery和tablesorter插件的js和css文件，建议直接引入CDN链接

html <head> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery.tablesorter/2.31.2/js/jquery.tablesorter.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery.tablesorter/2.31.2/css/theme.blue.min.css" /> </head>

编写HTML表格

编写一个展示数据的表格，并且给每个th元素添加一些数据属性。

```html

名称	价格	库存
电视	5000	20
冰箱	4000	15

```

此处三个数据属性的含义分别是：

data-sorter="false"，表示这一列不参与排序
data-sorter="digit"，表示这一列是数字类型，按数字大小排序
data-sorter="text"，表示这一列是普通文本类型，按字典序排序
初始化tablesorter

为表格添加tablesorter插件功能，具体操作如下：

javascript $(function () { $("#myTable").tablesorter(); });

重新渲染表格

由于tablesorter对表格DOM做了很多改动，可能会使得一些表格渲染不出来，此时需要调用tablesorter的一个api函数来重新渲染表格。

javascript $("#myTable").trigger("update");

完整代码展示：

```html

tablesorter实现demo

名称	价格	库存
电视	5000	20
冰箱	4000	15

```

以上就是利用tablesorter实现表格排序的全部步骤。

示例

示例一：使用自定义比较函数

有时候tablesorter默认提供的比较函数无法满足排序需求，需要自己编写比较函数，具体示例如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery.tablesorter/2.31.2/js/jquery.tablesorter.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery.tablesorter/2.31.2/css/theme.blue.min.css" />
  <title>tablesorter自定义比较函数示例</title>
</head>

<body>
  <table id="myTable" class="tablesorter">
    <thead>
      <tr>
        <th>Name</th>
        <th>Salary</th>
        <th>Birthdate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Bob</td>
        <td>$1000</td>
        <td>08/01/1994</td>
      </tr>
      <tr>
        <td>Alice</td>
        <td>$3000</td>
        <td>01/20/1992</td>
      </tr>
      <tr>
        <td>Charlie</td>
        <td>$2000</td>
        <td>12/01/1995</td>
      </tr>
    </tbody>
  </table>
  <script>
    $(function () {
      $.tablesorter.addParser({
        // set a unique id
        id: 'birthdate',
        is: function (s) {
          // return false so this parser is not auto detected
          return false;
        },
        format: function (s, table, cell) {
          // format your data for normalization
          var date = s.split('/');
          var year = parseInt(date[2], 10);
          var month = parseInt(date[1], 10);
          var day = parseInt(date[0], 10);
          return new Date(year, month - 1, day);
        },
        // set type, either numeric or text
        type: 'numeric'
      });
      $("#myTable").tablesorter({
        headers: {
          2: {
            sorter: 'birthdate'
          }
        }
      });
      $("#myTable").trigger("update");
    });
  </script>
</body>
</html>

其中，自定义的比较函数为 $.tablesorter.addParser({...})，示例中定义了一个将格式为"DD/MM/YYYY"的生日字符串转化为日期对象的比较函数，并将此函数应用在第三列上，实现对生日的排序。

示例二：使用分页插件

tablesorter的一个重要功能是分页，使得数据显示更为清晰，具体示例如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery.tablesorter/2.31.2/js/jquery.tablesorter.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery.tablesorter/2.31.2/js/jquery.tablesorter.pager.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery.tablesorter/2.31.2/css/theme.blue.min.css" />
  <title>tablesorter分页插件示例</title>
</head>

<body>
  <table id="myTable" class="tablesorter">
    <thead>
      <tr>
        <th>Name</th>
        <th>Salary</th>
        <th>Birthdate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Bob</td>
        <td>$1000</td>
        <td>08/01/1994</td>
      </tr>
      ...
      <tr>
        <td>Jane</td>
        <td>$5000</td>
        <td>06/12/1995</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3" class="pager">
          <button class="first">第一页</button>
          <button class="prev">上一页</button>
          <span class="pagedisplay"></span>
          <button class="next">下一页</button>
          <button class="last">最后一页</button>
          <select class="pagesize">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
          </select>
        </td>
      </tr>
    </tfoot>
  </table>
  <script>
    $(function () {
      $("#myTable")
        .tablesorter({
          widthFixed: true,
          widgets: ['zebra', 'filter'],
          headers: {
            2: {
              sorter: 'shortDate'
            }
          } // set second column as a shortDate (filter widget allows multiple types)
        })
        .tablesorterPager({
          container: $(".pager"),
          ajaxUrl: null,
          customAjaxUrl: function (table, url) {
            // 自定义ajax请求数据地址，返回下一页的数据，具体细节请查看tablesorterPager文档
          },
          ajaxProcessing: function (ajax) {
            // filter out pager (numeric) and sorter (text) rows and return the remaining rows
            return [ajax.data[0], ajax.data[1], ajax.data[2]];
          },
          updateArrows: true,
          page: 0,
          output: '{startRow} - {endRow} / {filteredRows} ({totalRows})' // the output string
        });
    });
  </script>
</body>

</html>

对于分页功能，我们需要在HTML结构中添加tfoot元素，其中实现上一步、下一页的按钮点击事件及页码信息显示，具体可以查看 tablesorterPager的文档，此处我们只负责对tablesorter的分页插件api进行配置的演示及说明。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery插件tablesorter表格排序实现过程解析 - Python技术站

JQuery插件tablesorter表格排序实现过程解析

JQuery插件tablesorter表格排序实现过程解析

简介

实现过程

示例

示例一：使用自定义比较函数

示例二：使用分页插件

相关文章