<!TOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>简单的分页，模拟数据，没有封装，显示原理</title>
</head>
<style>
img{
width: 100px;
height: 100px;
}
</style>
<body>
<div class="box">
<ul>
</ul>
</div>
<p><input class="btn" type="button" value="加载.." /></p>
<span style="cursor:pointer;margin-right:10px;" class="prev">上一页</span>
<span style="cursor:pointer;margin-right:10px;" class="first">第一页</span>
<span style="cursor:pointer;margin-right:10px;" class="last">最后一页</span>
<span style="cursor:pointer;margin-right:10px;" class="next">下一页</span>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="text/javascript">
;(function($){
var num = 5;//每页显示的个数
var n = 0;
var m = -num;
function ajax(pageType){
var oul = $(".box").find("ul");
var ohtml = "";
$.ajax({
type:"get",
url:"data.json",
dataType:"json",
success:function(data){
$(oul).empty();
if(n < data.length && pageType=="next"){ //上一页
n += num;
m += num;
}else if(m > 0 && pageType=="prev"){ //下一页
n -= num;
m -= num;
}else if(pageType=="first"){ //第一页
n = num;
m = 0;
}else if(pageType=="last"){ //最后一页
n = data.length+(data.length%num)-1;
m = data.length+(data.length%num)-6;
}
$.each(data,function(i,val){
if(i>=m && i<n){
$("ul").append("<li><a href=" + this.youhuilink + "><img src=" + this.img + "></a><a href=" + this.youhuilink + "><div><p>" + this.name + "</p><span>￥" + this.price + "</span><span>销量："+this.xiaoliang+"</span><span>"+this.youhuimoney
+"</span></div></a></li>")
}
});
}
});
};
$(".next").click(function(){
ajax("next");
});
$(".prev").click(function(){
ajax("prev");
});
$(".first").click(function(){
ajax("first");
});
$(".last").click(function(){
ajax("last");
});
$(function(){ //初始化
ajax("next");
});
}(jQuery));
</script>
</body>
</html>
网友评论