jquery实现的table排序功能示例

下面是详细讲解 “jquery实现的table排序功能示例”的完整攻略。

简介

Table排序是一种常见的需求，可以通过jQuery插件实现，本文将介绍如何使用jquery实现table排序功能。

步骤1：引入jQuery和插件js文件

在使用jQuery之前，需要先引入jquery插件的js文件，可以通过以下方式引入：

<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>

引入后，需要创建一个table标签，并且每一个表头需要设置一个sorter属性，来指定排序类型

<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th sorter="digit">数字</th>
      <th sorter="text">字符串</th>
      <th sorter="date">日期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10</td>
      <td>bbb</td>
      <td>2020-01-01</td>
    </tr>
    <tr>
      <td>3</td>
      <td>aaa</td>
      <td>2019-01-01</td>
    </tr>
  </tbody>
</table>

然后在js中调用tablesorter方法即可。

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

现在就可以实现table排序功能了。排序方法根据sorter属性值决定。

示例1：基础排序示例

下面是一个简单的table排序示例，该示例包括数字、字符串和日期三种类型的排序。按照代码规范，我会将代码放到一个代码块中。

<html>

<head>
  <meta charset="utf-8">
  <title>table排序</title>
  <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
</head>

<body>
  <table id="myTable" class="tablesorter">
    <thead>
      <tr>
        <th sorter="digit">数字</th>
        <th sorter="text">字符串</th>
        <th sorter="date">日期</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>10</td>
        <td>bbb</td>
        <td>2020-01-01</td>
      </tr>
      <tr>
        <td>3</td>
        <td>aaa</td>
        <td>2019-01-01</td>
      </tr>
      <tr>
        <td>5</td>
        <td>ccc</td>
        <td>2021-01-01</td>
      </tr>
    </tbody>
  </table>
  <script>
    $(document).ready(function() {
      $("#myTable").tablesorter();
    });
  </script>
</body>

</html>

示例2：自定义排序类型示例

有时候，我们需要按照一些自定义的排序方式来对table进行排序，例如按照中文拼音排序。下面是一个自定义排序类型的示例。

<html>

<head>
  <meta charset="utf-8">
  <title>自定义table排序</title>
  <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
  <script src="https://cdn.bootcss.com/pinyin/1.0.0/pinyin.js"></script>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
      padding: 5px;
    }
  </style>
</head>

<body>
  <table id="myTable" class="tablesorter">
    <thead>
      <tr>
        <th sorter="digit">数字</th>
        <th sorter="sort-by-pinyin">中文名称</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>10</td>
        <td>张三</td>
      </tr>
      <tr>
        <td>3</td>
        <td>李四</td>
      </tr>
      <tr>
        <td>5</td>
        <td>王五</td>
      </tr>
    </tbody>
  </table>
  <script>
    $.tablesorter.addParser({
      id: 'sort-by-pinyin',
      is: function() {
        return false;
      },
      format: function(s) {
        return pinyin.getFullChars(s).toLowerCase();
      },
      type: 'text'
    });
    $(document).ready(function() {
      $("#myTable").tablesorter({
        headers: {
          1: {
            sorter: 'sort-by-pinyin'
          },
        }
      });
    });
  </script>
</body>

</html>

以上就是基于jquery实现table排序的完整攻略，希望能对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现的table排序功能示例 - Python技术站

jquery实现的table排序功能示例

简介

步骤1：引入jQuery和插件js文件

示例1：基础排序示例

示例2：自定义排序类型示例

相关文章