Web前端开发学习之路——表格排序插件（tablesorter）

最新推荐文章于 2024-05-10 23:51:52 发布

宇直豪

最新推荐文章于 2024-05-10 23:51:52 发布

阅读量4.1k

点赞数 3

分类专栏：前端开发文章标签： tablesorter 前端开发

本文链接：https://blog.csdn.net/CSDN_XUWENHAO/article/details/88829703

版权

前端开发专栏收录该内容

15 篇文章 1 订阅

订阅专栏

表格是呈现数据不可缺少的工具，通过tablesorter插件能够轻松地美化表格的排序只要设置一些参数就可以简单完成，让表格能够灵活呈现。

下载与套用

Tablesorted的下载地址为：http://plugins.jquery.com/tablesorter/

打开网址之后，点击右侧DOWNLOAD NOW

下载后将文件解压，解压后的文件夹种会包含多个文件夹和tablesorter的js文件，其中docs文件夹是说明文件，themes文件夹种有blue和green两种主题样式，通常只需使用jquery.tablesorter.js和themes文件夹，可以将它们复制到html文件的相同路径下，接下来我们看看如何套用tablesorter plungin。

Tablesorter是JQuery的plugin,因此仍然要加载jQuery library，再加载tablesorter plugin，表格的颜色可以套用themes文件夹种提供的主题样式。下面语法使用了blue的主题样式，只要将下列语法添加到<head></head>标记之间即可。

<link rel="stylesheet" href="../Mottie-tablesorter/css/theme.blue.css" type="text/css"/>
<script src="../jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>

如果.js文件、.css文件与html文件位于不同文件夹，必须指定路径。

使用方式非常简单，首先制作一个基本的表格，tablesorter必须套用在标准的HTML表格中，表格必须有表头标记<thead><th>和表身标记<tbody>，并且指定table的Id名称和class名称，id名称可自定义，class必须指定为tablesorter，如下所示：

<table id="myTable" class="tablesorter-blue">
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>数学</th>
        <th>英语</th>
        <th>语文</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>A001</td>
        <td>玩大锤</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>A002</td>
        <td>玩清华</td>
        <td>85</td>
        <td>95</td>
        <td>99</td>
    </tr>
    <tr>
        <td>A003</td>
        <td>上北大</td>
        <td>87</td>
        <td>98</td>
        <td>99</td>
    </tr>
    <tr>
        <td>A004</td>
        <td>上复旦</td>
        <td>88</td>
        <td>96</td>
        <td>100</td>
    </tr>
    </tbody>
</table>

接着，只要在网页加载完成时，告诉tablesorter将哪一个表格排序就可以了。语法如下：

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

可以看到表头右方多了一个排序按钮，只要单击它就可以对表格进行排序，非常方便。

高级应用

默认排序只要设置sortList参数即可，格式如下：

sortList:[[columnIndex,sortDirection],...]

columnIndex指定要排序的字段，作点起算第一列为0，从左到右；sortDirection是排序方式，0是升序排列（从小到大），1是降序排列（从大到小）。例如，要将第一列从大到小排序，第二列由小到大排序，如下

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

当然，还可以设置某一列不允许排序，只要在headers参数中指定字段不排序就可以了，语法如下：

headers:{0:{sorter:false},1:{sorter:false}}

奇偶分色

为了让表格更容易阅读，会在奇数行和偶数行分别用不同的颜色进行分隔，语法如下：

$("#sortList").tablesorter({widget:['zebra']});

效果如下：

完整范例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="../Mottie-tablesorter/css/theme.blue.css" type="text/css"/>
    <script type="text/javascript" src="jquery.tablesorter.js"></script>
    <!--<srcipt type="text/javascript" src="../Mottie-tablesorter/js/jquery.tablesorter.js"></srcipt>-->
<script type="text/javascript">
$(document).ready(function() {
    $("#sortTable").tablesorter(
        {
               sortList:[[0,1]],
                header:{1:{sorter:false}},
                widgets:['zebra']
        }
    );
});
</script>
</head>
<body>
<table id="sortTable" class="tablesorter-blue">

 <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>数学</th>
        <th>英语</th>
        <th>语文</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>A001</td>
        <td>玩大锤</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>A002</td>
        <td>玩清华</td>
        <td>85</td>
        <td>95</td>
        <td>99</td>
    </tr>
    <tr>
        <td>A003</td>
        <td>上北大</td>
        <td>87</td>
        <td>98</td>
        <td>99</td>
    </tr>
    <tr>
        <td>A004</td>
        <td>上复旦</td>
        <td>88</td>
        <td>96</td>
        <td>100</td>
    </tr>
    </tbody>
</table>
</body>
</html>

执行结果如下：

宇直豪

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发学习之路——表格排序插件（tablesorter）

表格是呈现数据不可缺少的工具，通过tablesorter插件能够轻松地美化表格的排序只要设置一些参数就可以简单完成，让表格能够灵活呈现。下载与套用Tablesorted的下载地址为：http://plugins.jquery.com/tablesorter/打开网址之后，点击右侧DOWNLOAD NOW下载后将文件解压，解压后的文件夹种会包含多个文件夹和tablesorter的...
复制链接

扫一扫