layer+dates -----分页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="laypage-v1.3/laypage/skin/laypage.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="laypage-v1.3/laypage/laypage.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="page1">

</div>
<div id="view1">

</div>
<script type="text/javascript">
//以下将以jquery.ajax为例,演示一个异步分页
function demo(curr){
//alert(Math.ceil(5/2));
$.get('http://ons.me/tools/dropload/json.php', {
page: curr || 1, //向服务端传的参数,此处只是演示
size:2
}, function(res){
console.log(res);
//此处仅仅是为了演示变化的内容
var demoContent = (new Date().getTime()/Math.random()/1000)|0;
var dd="<ul>";
for(var i=0;i<res.length;i++){
dd +="<li>"+ res[i].id+"-----"+res[i].title+"</li>";
}
dd +="</ul>";
$('#view1').append(dd);
//显示分页
laypage({
cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div>
pages: 15, //通过后台拿到的总页数
skin: '#c00', //加载内置皮肤,也可以直接赋值16进制颜色值,如:#c00
groups: 7 ,//连续显示分页数
skip: true, //是否开启跳页
curr: curr || 1, //当前页
jump: function(obj, first){ //触发分页后的回调
if(!first){ //点击跳页触发函数自身,并传递当前页:obj.curr
demo(obj.curr);
$('#view1').html(" ");
}
}
});
});
};
//运行
demo();
</script>
</body>
</html>

posted @ 2017-03-04 18:14  duguangyan  阅读(185)  评论(0编辑  收藏  举报