art-template和jquey.tablesorter的混合使用

最新推荐文章于 2021-08-03 18:25:55 发布

uncle_king

最新推荐文章于 2021-08-03 18:25:55 发布

阅读量273

点赞数

分类专栏：前端文章标签： jquery 前端 template 排序

本文链接：https://blog.csdn.net/uncle_king/article/details/78884894

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

art-template一般用于展示后端传过来的内容，后端回传一个list对象给前端，前端根据对象的属性，将结果一一遍历显示。jquey.tablesorter是jq的一个插件，用于对table中的列进行排序，在使用这个排序插件之前要先引入jquery。
下面是前端代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>index</title>
<script type="text/javascript" src="../lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="../lib/template-web.js"></script>
<link rel="stylesheet" href="../lib/jquery.tablesorter/themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />

</head>
<body>
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>age</th> 
</tr> 
</thead> 

<tbody id='content'> 
<script id='td_list' type="text/html" >
{{each list as v i}}
<tr> 
    <td>{{v.lastName}}</td> 
    <td>{{v.firstName}}</td> 
    <td>{{v.age}}</td> 
</tr> 
{{/each}}
</script>
</tbody> 
</table> 
<script type="text/javascript" >

$(function(){
    var data = {
    list: [{'firstName':'Smith','lastName':'John','age':13}, {'firstName':'Bach','lastName':'Frank','age':45},{'firstName':'Doe','lastName':'Jason','age':34}]
    };
    var html = template('td_list', data);
    document.getElementById('content').innerHTML = html;
    $("#myTable").tablesorter();
});
</script>
</body>
</html>

结果是：
这里写图片描述