<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<script src="jquery.min.js"></script>
<style>
a{text-decoration: none}
.content{width:1000px;margin:0 auto;padding-top:50px;}
.left-col{float:left;width:700px}
.right-col{float:right;width:300px}
table{width:100%}
table{border-collapse:collapse;border-spacing: 0}
table tr{border:1px solid #ccc;height:30px;}
table td{border:1px solid #ccc;}
.pages{margin-top:20px;}
.pages span.counts,.pages span.page{border:none;}
.pages em{font-style: normal;margin:0 5px;}
.pages span, .pages a{
display:inline-block;
margin-right:5px;
height:28px;
line-height:28px;
padding:0 5px;
min-width:20px;
border:1px solid #ccc;
text-align:center;
}
.pages .cur{
background: #01AAED;
color:#fff;
}
.pages .disabled{
border:1px solid #ccc;
color:#ccc;
cursor: not-allowed!important;
}
.p-content{display:inline-block}
</style>
</head>
<body>
<div class="content">
<div class="left-col">
<table class="piclist">
<thead>
<tr>
<td>序号</td>
<td>图片名称</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="pages">
<span class="counts">共<em>50</em>条</span>
<span class="page">共<em>50</em>页</span>
<div class="p-content"></div>
</div>
</div>
<div class="right-col">
<img src="">
</div>
</div>
<script>
$(function () {
var _pages=0
var _c=1;
getdata(_c);
function turnPage(cur){
var count=_pages;
var limit=4;
var pages= Math.ceil(count/4);
var _h="";
var s="";
var e="";
var _t="";
var c=parseInt(cur);
if(pages==1){
s="<a href='javascript:;' class='disabled'>"+"上一页"+"</a>";
e="<a href='javascript:;' class='disabled'>"+"下一页"+"</a>" ;
_h=s+"<a href='javascript:;' class='cur'>"+pages+"</a>"+e;
}else{
if(cur==1){
s="<a href='javascript:;' class='disabled'>"+"上一页"+"</a>";
e= "<a href='javascript:;' data-p='"+(c+1)+"'>"+"下一页"+"</a>";
}else if(cur==pages){
e="<a href='javascript:;' class='disabled'>"+"下一页"+"</a>" ;
s="<a href='javascript:;' data-p='"+(cur-1)+"'>"+"上一页"+"</a>";
} else{
s="<a href='javascript:;' data-p='"+(cur-1)+"'>"+"上一页"+"</a>";
e= "<a href='javascript:;' data-p='"+ (c+1) +"'>"+"下一页"+"</a>";
}
for(var i=0;i<pages;i++){
if(cur==(i+1)){
_t+="<a href='javascript:;'class='cur' data-p='"+(i+1)+"'>"+(i+1)+"</a>"
}else{
_t+="<a href='javascript:;'data-p='"+(i+1)+"'>"+(i+1)+"</a>"
}
}
_h=s+_t+e;
console.log()
}
$(".p-content").html(_h);
};
function getdata(curpage){
$.ajax({
type :"post",
url :'json1.json',
data:{
"curpage":curpage,
},
beforeSend:function(){
$(".piclist tbody").html("正在加载。。。")
},
success:function (res) {
$(".piclist tbody").find("*").remove();
var couts=res.datas.counts;
var listdata=res.datas.data;
var _html='';
for(var i=0;i<listdata.length;i++){
_html+= "<tr><td>"+listdata[i].id+"</td><td _href='"+listdata[i].url+"'>"+listdata[i].name+"</td></tr>";
}
$(".piclist tbody").html(_html);
$(".counts em").text(couts);
var _p= Math.ceil(couts/4);
$(".page em").text(_p);
_pages=couts;
},
complete:function () {
turnPage(curpage);
}
});
};
$(".pages .p-content").on('click','a',function () {
var cur=$(this).attr("data-p");
$(this).addClass("cur").siblings().removeClass("cur");
getdata(cur)//cur 当前页
})
})
</script>
</body>
</html>
转载于:https://my.oschina.net/conqueror/blog/3003142