在上一篇博客中,笔者做了一个简易的分页组件,这次做了一个逻辑比较全的..相对来说优化了一下…..下面我们来看代码..
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/Jquery1.91.js" ></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/page.js" ></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/page.css" />
</head>
<body>
<div id="page">
<!--在这里放一个page的盒子,里面的内容由js添加-->
</div>
</body>
</html>
css代码:
#page{
margin-top: 100px;
}
#page .curr-page{
background-color:#009d8e;
color:white;
}
#page .page-btn:hover , #page .prev:hover, #page .next:hover{
background-color:#009d8e;
color:white;
}
js代码(核心):
var page = {
currPage:1, //当前页面,初始化为1
totalPage:0,//总页面,通过计算获得
pageLength:10,//按钮数量,可以自己把控
startPage:1,//当前显示的第一个按钮的值
endPage:10//当前显示的最后一个按钮的值
}
$(function(){
//这里假设由异步返回了信息,然后我们计算出了页数
page.totalPage = 17; //假设是17页
//初始化按钮,即第一次网页面上添加按钮
addButtons(page.startPage , page.pageLength);
$("#page .page-btn").first().addClass("curr-page");
//禁用"上一页"按钮,因为默认是第一页,第一页没有上一页
isDisabled(page.currPage,page.totalPage);
//绑定“上一页”按钮的点击事件
$(document).on("click","#page .prev",function(){
page.currPage = parseInt(page.currPage) - 1 ;
pageIteration(page.currPage);
isDisabled(page.currPage,page.totalPage);
})
//绑定“下一页”按钮点击事件
$(document).on("click","#page .next",function(){
page.currPage = parseInt(page.currPage) + 1 ;
pageIteration(page.currPage);
isDisabled(page.currPage,page.totalPage);
})
//绑定“页码”按钮的点击事件
$(document).on("click",".page-btn",function(){
$this = $(this);
page.currPage = parseInt($this.text());
pageIteration(page.currPage);
isDisabled(page.currPage,page.totalPage);
})
})
//添加分页插件,根据总页数来添加按钮
function addButtons(startPage,pageLength){
$("#page").html(" ");
var _html = "<center><button class='btn btn-default prev' ><<上一页</button> ";
for(var i = startPage ; i < startPage + pageLength ; i++){
_html += "<button class='btn btn-default page-btn' data-pageno="+i+">"+ i +"</button> ";
}
_html += " <button class='btn btn-default next'>下一页>></button></center>";
$("#page").html(_html);
}
//分页按钮迭代(最要是对"上一页"和”下一页“是否禁用的判断)
function isDisabled(pagenum,totalpage){
if(totalpage ==0 || totalpage ==1){
$("#page .prev").attr("disabled",true);
$("#page .next").attr("disabled",true);
}else if(pagenum ==1){
$("#page .prev").attr("disabled",true);
$("#page .next").removeAttr("disabled");
}else if(pagenum == totalpage){
$("#page .next").attr("disabled",true);
$("#page .prev").removeAttr("disabled");
}else{
$("#page .next").removeAttr("disabled");
$("#page .prev").removeAttr("disabled");
}
}
//按钮迭代器
function pageIteration(currPage){
if(page.currPage != 1 && page.currPage == page.startPage ){
page.startPage = page.currPage - page.pageLength/2 ;
page.endPage = page.currPage + page.pageLength/2 -1;
addButtons(page.startPage , page.pageLength);
$("#page .page-btn").eq(page.pageLength/2).addClass("curr-page");
}else if(page.currPage != page.totalPage && page.currPage == page.endPage){
page.startPage = page.currPage - page.pageLength/2 + 1;
page.endPage = (page.currPage + page.pageLength/2) >= page.totalPage ? page.totalPage : (page.currPage + page.pageLength/2);
addButtons(page.startPage , page.pageLength /2 + (page.endPage == page.totalPage ? (page.endPage - page.currPage) : page.pageLength/2));
$("#page .page-btn").eq(page.pageLength/2 -1).addClass("curr-page");
}
$("#page .page-btn").removeClass("curr-page").parent().find("[data-pageno="+currPage+"]").addClass("curr-page");
//console.info(page); 看官可以把此时的page对象输出来看一看...
}
效果: