jtemplates + tablesorter--- 实现HTML中一个简单的可按列排序table

本文介绍了如何结合JTemplates和Tablesorter JavaScript库,创建一个可以按列排序的HTML表格。主要涉及的文件包括jquery-1.11.1.min.js、jquery-jtemplates.js和jquery.tablesorter.min.js。通过示例代码展示了如何在隐藏的textarea中定义模板,并在div中渲染可排序的表格。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近碰巧需要自己实现一个简单的web页面,要求单击页面表格的每个表头可按列排序。

把几个关键点记下来,大家若有需要可针对改进:


主要用到如下三个js:
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-jtemplates.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js">


<div id="testDiv"></div>
<textarea id="testTemplate" style="display:none">
<table class="zebra-striped" id="testTable" border="1" style="border-collapse:collapse">
<thead><tr><th class="Header headerSortDown">Name</th><th class="header">Age</th></tr></thead>
<tbody>
{#foreach $T as item}
<tr><td>{$T.item.name}</td><td>{$T.item.age}</td></tr>
{#/for}
</tbody>
</table></textarea>


<script type= "text/javascript">
var testInfo = [{"name":"tom","age":"20"},{"name":"Jack","age":"30"},{"name":"Nancy","age":"26"}];
$("#testDiv").setTemplateElement("testTemplate");
$("#testDiv").processTemplate(testInfo);
$(document).ready(function() { $("#testTable").each(function(i) { $(this).tablesorter({ sortList: [[0,1]], headers: {2: { sorter: 'timestr'}}}); });});
</script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值