标签：function console 分页 dictionary self 招聘 data 百度 log
模板引擎 渲染 （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>说明 ： 数据是自己复制的假数据
目录结构
标签：function,console,分页,dictionary,self,招聘,data,百度,log 来源： https://blog.csdn.net/weixin_41040445/article/details/115261423
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。