至于概念性的东西就不再说了，可参考链接：http://www.phpddt.com/dhtml/jquery_tmpl.html 或 http://www.jb51.net/article/35811.htm ，接下来将是对列表的展现案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速简单。">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="author" content="译者：网赛<[email protected]>">
<title>测试</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--导入jquery.tmpl.js文件-->
<script type="text/javascript" src="jquerytmpl/jquery-tmpl-master/jquery.tmpl.js"></script>
<style type="text/css">
.table1{
text-align: center;
}
h2{
text-align: center;
}
</style>
<!--实现体-->
<script>
$(function () {
var website = [{ url: ‘2015-8-26‘, name: ‘3600‘, tags: ‘Q币‘ }, { url: ‘2015-8-26‘, name: ‘3600‘, tags: ‘Q币‘}];
var wsdata = { time:‘2015-8-28‘, money:‘3600‘, type:‘话费‘};
var datatable = [
{ time:‘2015-8-28‘, money:‘3600‘, type:‘话费‘},
{ time:‘2015-8-28‘, money:‘3612‘, type:‘支付宝‘}
];
$(‘#myTemplate‘).tmpl({a:datatable}).appendTo(‘.table‘);
//$(‘#myTemplate‘).tmpl(website, {
//getTags: function (separator) {
//return this.data.tags.join(separator);
//}
//}).appendTo(‘#rows‘);
});
</script>
<script id="myTemplate" type="text/x-jquery-tmpl">
{{each a}}
<tr>
<td>${$value.time}</td>
<td>${$value.money}</td>
<td>${$value.type}</td>
</tr>
{{/each}}
</script>
</head>
<body>
<table class="table table-hover">
<tr>
<th>时间</th>
<th>金额</th>
<th>类型</th>
</tr>
</table>
<!--1111111111111111111111111111111111111111111111111111-->
<div id="div_each"></div>
<div class="container" id="container">
<table class="table table-hover">
<h2>兑换记录</h2>
<tr>
<th>时间</th>
<th>金额</th>
<th>类型</th>
</tr>
<tr>
<td>2015-8-26</td>
<td>3600</td>
<td>Q币</td>
</tr>
</table>
</div>
<script type="text/javascript" type="text/x-jquery-tmpl">
</script>
<script id="each" type="text/x-jquery-tmpl">
<h3>users</h3>
{{each(i,user) users}}
<div>${i+1}:{{= user.name}}</div>
{{if i==0}}
<h4>group</h4>
{{each(j,group) groups}}
<div>${group.name}</div>
{{/each}}
{{/if}}
{{/each}}
<h3>depart</h3>
{{each departs}}
<div>{{= $value.name}}</div>
{{/each}}
</script>
<script type="text/javascript">
var eachData = { users: [{ name: ‘jerry‘ }, { name: ‘john‘}], groups: [{ name: ‘mingdao‘ }, { name: ‘meihua‘ }, { name: ‘test‘}], departs: [{ name: ‘IT‘}] };
$("#each").tmpl(eachData).appendTo(‘#div_each‘);
</script>
</body>
</html>