tablesorter的使用

最新推荐文章于 2021-08-05 17:29:00 发布

OXINKA

最新推荐文章于 2021-08-05 17:29:00 发布

阅读量107

点赞数 1

文章标签： javascript html5 jquery css3 chrome

本文链接：https://blog.csdn.net/m0_60020519/article/details/118547388

版权

使用tablesorter插件实现表格排序

新建一个index.html文件
注意:一点要结合thead和tbody使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./theme.default.css" />
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.tablesorter.min.js"></script>
    <script
      type="text/javascript"
      src="./jquery.tablesorter.widgets.min.js"
    ></script>
    <style>
      .tablesorter thead th {
        background: #666666;
      }
      .tablesorter tbody td {
        background: #ffffbd;
      }
    </style>
  </head>
  <body>
    <table id="myTable" class="tablesorter">
      <thead>
        <tr>
          <th>表头1</th>
          <th>表头2</th>
          <th>表头3</th>
          <th>表头4</th>
          <th>表头5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>111</td>
          <td>head</td>
          <td>jsmith@email.com</td>
          <td>$50.00</td>
          <td>http://www.111.com</td>
        </tr>
        <tr>
          <td>333</td>
          <td>mouth</td>
          <td>mouth@email.com</td>
          <td>$50.00</td>
          <td>http://www.333.com</td>
        </tr>
        <tr>
          <td>222</td>
          <td>nose</td>
          <td>nose@email.com</td>
          <td>$100.00</td>
          <td>http://www.222.com</td>
        </tr>
        <tr>
          <td>555</td>
          <td>face</td>
          <td>face@email.net</td>
          <td>$50.00</td>
          <td>http://www.555.com</td>
        </tr>
      </tbody>
    </table>
    <script>
      $(function () {
        $("#myTable").tablesorter();
      });
    </script>
  </body>
</html>

下载这几个文件
把这些文件放在同级使用
jQuery cdn
tablesorter cdn 找到以下文件
在这里插入图片描述

OXINKA

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tablesorter的使用

使用tablesorter插件实现表格排序新建一个index.html文件注意:一点要结合thead和tbody使用<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" conte
复制链接

扫一扫