写个前端分页

Shaka 2月前 ⋅ 71 阅读

<div class="pure-u-1 pure-u-sm-24-24" style="margin-top: 10px;">
<div class="pure-u-1 pure-u-md-9-24"></div>
<div class="pure-u-1 pure-u-md-12-24">
<div class="cp-item" style="letter-spacing: normal;float: left;margin: 5px 0 0 20px;">
<span>共</span>
<span id="cp-count">0</span>
<span>条</span>
</div>
<div class="cp-item" style="letter-spacing: normal;float: left;margin: 5px 0 0 20px;">
<span>第</span>
<span id="curr-page">1</span>
<span>/</span>
<span id="total-page">1</span>
<span>页</span>
</div>
<div class="cp-item" style="letter-spacing: normal;float: left;margin-left: 20px;">
<button class="page" id="homePage">首页</button>
<button class="page" id="pageUp">上页</button>
<button class="page" id="pageDown">下页</button>
<button class="page" id="endPage">尾页</button>
</div>
</div>
</div>
<style>
.page{background-color: #fff;border: 1px solid #999;border-radius: 3px;width: 50px;height: 30px;}
</style>
var dataList;
var currentPage=1;
var totalPage =0;
//获取数据,初始化条数,总页数
$.get('url',{},function(data){
dataList = data;
$("#cp-count").text(data.length);
totalPage = parseInt(data.length/8)+1;
$("#total-page").text(totalPage);
toChart(currentPage,data);
});

$("#homePage").click(function() {
if(currentPage!=1){
goPage(1);
currentPage=1;
}else{
alert("已到达首页");
}
});
$("#endPage").click(function() {
if(currentPage!=totalPage){
goPage(totalPage);
currentPage=totalPage;
}else{
alert("已到达尾页");
}
});
$("#pageUp").click(function() {
if(currentPage>1){
goPage(currentPage-1);
currentPage-=1;
}else{
alert("已到达首页");
}
});
$("#pageDown").click(function() {
if(currentPage<totalPage){
goPage(currentPage+1);
currentPage+=1;
}else{
alert("已到达尾页");
}
});
//翻页根据页数获取条数
function goPage(page){
$("#curr-page").text(page);
//固定每页8条
var i = ((page-1)*8);
var total = page*8>data.length?data.length:page*8;
var j = 1;
for(i;i<total;i++){
...........
..........
}
}


注意:本文归作者所有,未经作者允许,不得转载

全部评论: 0

    我有话说: