-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (115 loc) · 4.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HrAjaxPageTpl 封装laypage 和 artTemplate</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<h2 class="text-center mb-15">HrAjaxPageTpl<small class="ml-25" style="display:inline-block">By hairong.W</small></h1>
<h3>介绍:</h3>
<p>1,把laypage和artTemplate封装到了一起使用,方便实用;</p>
<p>2,可使用ajax方法在回调中渲染模板和分页,亦可单独使用封装好的ajax方法;</p>
<p>3,ajax方法已经设置了超时、404、及其他错误提示;可用ajax旧式请求回调,也支持jQuery的ajax的deferred链式回调写法;</p>
<p>4,该插件使用原型对象共享ajax和渲染模板方法,所以页面有多个分页和模板的渲染也不会影响性能;</p>
<p>5,可以单独使用模板而不开启模板;</p>
<p>
<span>6,github 地址: </span>
<a href="https://github.com/whrweb/HrAjaxPageTpl.git" title="https://github.com/whrweb/HrAjaxPageTpl.git">https://github.com/whrweb/HrAjaxPageTpl.git</a>
</p>
<h3 class="mt-15">依赖说明:</h3>
<p>1,依赖jQuery;</p>
<p>
<span>2,artTemplate是一款前端模板渲染引擎,介绍:</span>
<a href="https://github.com/aui/artTemplate">https://github.com/aui/artTemplate</a>
</p>
<p>
<span>3,layPage是一款多功能的js分页组件,介绍:</span>
<a href="http://laypage.layui.com/">http://laypage.layui.com</a>
</p>
<h3 class="mt-15">==>以下是一个分页内嵌套分页的demo:</h3>
<p class="mb-15">因为请求的是一个本地写死的json文件,所以点击分页不会有“效果”,所以查看时请打开network,就可以看到请求的参数变化和请求回的数据了</p>
<div>
<div id="conId"></div>
<div class="pull-right" id="pageId"></div>
</div>
<script type="text/html" id="tplId">
<table>
<thead>
<tr>
<th>id</th>
<th>城市</th>
<th>数目</th>
<th>位置</th>
</tr>
</thead>
<tbody>
{{each items as v}}
<tr>
<td>{{ v.id }}</td>
<td>{{ v.city }}</td>
<td>{{ v.number }}</td>
<td>{{ v.way }}</td>
</tr>
{{/each}}
</tbody>
</table>
<div class="pull-right">共{{ page.totalPage }}页,共{{ page.totalRow }}条,当前是第{{ page.curPage }}页</div>
</script>
<script src="js/jquery.js"></script>
<script src="js/laypage.js"></script>
<script src="js/template.js"></script>
<script src="js/hrAjaxPageTpl.js"></script>
<script>
$(function(){
// 使用demo:
//单独使用ajax方法/s:
hrAjax.ajax({
url:"json/success.json"
});
//单独使用ajax方法/e:
// 模板+分页
// --------/s
var resultData = {
curPage:1,
pageSize : 10,
name : "hr"
};
var thisDemoObj = hrAjaxPageTpl({
page : $("#pageId"), //不设置elPage的话即不启用分页,设置了这个属性就启用了分页,值为分页的容器
tpl : "tplId", //模板容器id
con : $("#conId") //展示渲染后的html的容器
});
thisDemoObj.ajax({
url:"json/success.json",
data : resultData
},function(data){ // 请求成功的deferred链式回调,参数为请求回的数据
//console.log(data);
},function(xhr){ // 请求失败的deferred链式回调,参数为请求回的数据
//console.log(xhr);
});
// --------/e
// 备注:
// 从后台响应的数据格式为:
// {
// "code":0,
// "data":{
// "items":[
// {
// "city":"北京",
// "number":392
// }
// ],
// "page":{
// "curPage":1,
// "pageSize":2,
// "totalPage":2,
// "totalRow":2
// }
// },
// "msg":"成功"
// }
})
</script>
</body>
</html>