近期进行的项目中需要用到分页的技术,之前一直使用bootstrap的模板,然后使用代码拼接的方式作分页,但这种方式不够优雅,百度了一下,发现layui对于分页的处理比较好,因此学习了一下,经过努力,终于作出了一个非常好的分页案例。
后来又继续学习了layui,发现layui真是有不少好的插件,因此也顺便把layui的模板引掣学习了一下。下面是案例代码。
分页
- 第一步,引入layui包,当然jquery肯定是不能少的,layui 下载地址
<script src="${pageContext.request.contextPath }/bootstrap/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/background/lib/layui/layui.js"></script>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/background/lib/layui/css/layui.css" />
- HTML 代码部分
<body>
<table>
<thead>
<tr>
<th>名称</th>
<th>地址</th>
<th>邮箱</th>
<th>序号</th>
</tr>
</thead>
<tbody id="content">
</tbody>
</table>
<div id="paged"></div>
</body>
- 定义模板
<!--laytpl模板 -->
<script id="demo" type="text/html">
{{# for(var i = 0, len = d.length; i < len; i++){ }}
<tr>
<td>{{d[i].linkName}}</td>
<td>{{d[i].linkUrl}}</td>
<td>{{d[i].linkEmail}}</td>
<td>{{d[i].orderNum}}</td>
</tr>
{{# } }}
{{# if(d.length === 0){ }}
无数据
{{# } }}
</script>
- 分页及模板代码部分
<script type="text/javascript">
//初始化执行方法
$(document).ready(function() {
getData(1, 5);
});
function getData(curr, limit) {
//ajax调用
$.getJSON("${pageContext.request.contextPath }/link?action=backList", {
currentPage : curr,
pageSize : limit
},
//success后的回调函数
function(data) {
//模板引掣
layui.use('laytpl', function() {
var laytpl = layui.laytpl;
var gettpl = document.getElementById('demo').innerHTML; //获取拼接部分的内容
laytpl(gettpl).render(data.linkBackList, function(html) { //给拼接的模板绑定数据
document.getElementById('content').innerHTML = html; // 把生成的结构绑定在负责呈现内容的div中。
});
});
//分页
layui.use('laypage', function() {
var laypage = layui.laypage;
laypage
.render({
elem : 'paged',//填充目标,paged是ID属性,这里不需要加#
count : data.linkCount,//回填数据量
limit : limit,//每页显示数量
limits : [ 5, 10 ],
curr : curr,//当前页
groups : 3,//页码连续数
first : '首页',
last : '尾页', //若不显示,设置false即可
layout : [ 'count', 'prev', 'page', 'next',
'limit', 'skip' ],
//跳转后的回调
jump : function(obj, first) {
//obj包含了当前分页的所有参数,比如:
console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
console.log(obj.limit);//得到当前设置的每页显示数量
//首次不执行
if (!first) {
getData(obj.curr, obj.limit);
}
}
});
})
})
}
</script>
AAEEE77008056C980/12841)