模板引擎 渲染 （underscore.js）分页器（jquery.min.js）
代码 分页器参考 分页器 内容
<!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">
<link rel="stylesheet" href="css/index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="job-list-message">
<h1>职位信息</h1>
<div class="pull-right">
共
<span class="red">3016</span>
个在招职位
</div>
</div>
<div class="job-list">
<div class="list-header">
<div class="list-row">
<div class="list-col">职位名称</div>
<div class="list-col">职位类别</div>
<div class="list-col">工作地点</div>
<div class="list-col">招聘人数</div>
<div class="list-col">更新时间</div>
<div class="list-col"></div>
</div>
</div>
<div class="list-body">
</div>
</div>
</div>
<div class="pageNav" id="pageNav">
<span class="preve page" id="preve">上一页</span>
<span class="next page" id="next">下一页</span>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/underscore.js"></script>
<script type="text/template" id="template">
<div class="dataInfo">
<div class="list-row">
<div class="list-col"><%=name%></div>
<div class="list-col"><%=postType%></div>
<div class="list-col"><%=workPlace%></div>
<div class="list-col"><%=workType%></div>
<div class="list-col"><%=publishDate%></div>
<div class="list-col">
<div class="icon"></div>
</div>
</div>
<div class="job-requirements">
<h3>工作职责：</h3>
<p><%=workContent%></p>
<h3>职位要求：</h3>
<p><%=serviceCondition%></p>
</div>
</div>
</script>
<script>
var jobTable = $(".list-body");
//模板字符串
var templateStr = $("#template").text()
//console.log(templateStr);
//模板变异函数
var compiled = _.template(templateStr);
function RenderDom(dictionary) {
this.dictionary = dictionary;
//正则匹配
if (this.dictionary.postType.indexOf("-") != -1) {
this.dictionary.postType = this.dictionary.postType.replace(/.*\-(.*)\-.*/g, function (match, $1) {
console.log(match)
console.log($1)
return $1
})
};
//console.log(dictionary)
var domStr = compiled(this.dictionary);
//console.log(domStr)
this.$dom = $(domStr);
//console.log(dom)
//渲染
jobTable.append(this.$dom);
//箭头上下状态
this.status = 1;
//备份状态
var self = this
//点击箭头 展示职位详细信息
this.$dom.find(".icon").click(function () {
if (self.status == 1) {
$(this).addClass("bottonIcon");
self.$dom.find(".job-requirements").css("display", "block");
self.status = 0;
} else {
$(this).removeClass("bottonIcon");
self.$dom.find(".job-requirements").css("display", "none");
self.status = 1;
}
})
}
function Pager(totalPage) {
..............
}
Pager.prototype.pageTo = function () {
..................
//请求后台数据
$.get("data/page" + this.currentPage + ".json", function (data) {
//删除之前的数据
$(".dataInfo").remove();
_.each(data.postList, function (item) {
new RenderDom(item)
})
})
}
$.get("data/page1.json", function (data) {
//显示总条数
$("#rowCount").html(data.rowCount);
_.each(data.postList, function (item) {
new RenderDom(item)
})
new Pager(data.totalPage);
console.log(data, 'data')
})
</script>
</body>
</html>说明 ： 数据是自己复制的假数据
目录结构
