自定义分页
基本模板:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination>li {
display: inline;
}
.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
color: #157ab5;
background-color: #eeeeee;
border-color: #dddddd;
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
z-index: 2;
color: #999999;
background-color: #f5f5f5;
border-color: #dddddd;
cursor: default;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.pagination>li>a, .pagination>li>span {
position: relative;
float: left;
padding: 8px 12px;
line-height: 1.42857143;
text-decoration: none;
color: #2fa4e7;
background-color: #ffffff;
border: 1px solid #dddddd;
margin-left: -1px;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script>
;(function ($, window, document, undefined) {
var methods = {
init: function (obj, option) {
return (function () {
methods.fillHtml(obj, option);
methods.bindEvent(obj,option);
})();//立即执行
},
bindEvent: function (obj, option) {
//给每个页码设置点击事件.
return (function(){
obj.on('click','li>a',function(e){
e.preventDefault();
var pageCurrent=parseInt($(this).attr("data"));
debugger;
if(pageCurrent<1||pageCurrent>option.pageTotal){
return false;
}
option.pageCurrent=pageCurrent;
methods.fillHtml(obj,option);
if(typeof(option.callback)=="function" ){
option.callback();//执行回调函数
}
});
})();
},
fillHtml: function (obj, option) {
obj.empty();
//设置链接
var pageCurrent =option.pageCurrent;
var prevPage = pageCurrent - 1;
var nextPage = pageCurrent + 1;
var pageSize = option.pageSize;
var total = option.total;
var pageTotal = parseInt(total / pageSize);
if (pageTotal < 1) {
pageTotal = 1;
} else if (total % pageSize > 0) {
pageTotal = pageTotal + 1;
}
option.pageTotal=pageTotal;
//各个页码的生成
var lis = [];
lis.push(methods.createPrevElement(prevPage));
if (pageTotal <= 1) {
} else if (pageTotal > 1 && pageTotal <= 10) {//总条数最多10条: 直接显示所有页码
for (var pageNo = 1; pageNo <= pageTotal; pageNo++) {
var pageLi = methods.createPageNo(pageNo, pageCurrent);
lis.push(pageLi);
}
} else { //总条数超过10条,再根据当前页码来设置要显示的页码
if (pageCurrent < 7) {
for (var pageNo = 1; pageNo <= 7; pageNo++) {
var pageLi = methods.createPageNo(pageNo, pageCurrent);
lis.push(pageLi);
}
//设置最后三页
lis.push(methods.lastThreePageNo(pageTotal));
} else if (pageCurrent >= 7 && pageCurrent < pageTotal - 3) {
//设置前三页
lis.push(methods.firstThreePageNo());
//设置中间页码 中间显示5个页码
for (var pageNo = pageCurrent - 2; pageNo <= pageCurrent + 2; pageNo++) {
var pageLi = methods.createPageNo(pageNo, pageCurrent);
lis.push(pageLi);
}
//设置最后三页
lis.push(methods.lastThreePageNo(pageTotal));
} else {
//设置前三页
lis.push(methods.firstThreePageNo());
//设置后面页码
for (var pageNo = pageTotal - 6; pageNo <= pageTotal; pageNo++) {
var pageLi = methods.createPageNo(pageNo, pageCurrent);
lis.push(pageLi);
}
}
}
lis.push(methods.createNextElement(nextPage, pageTotal));
var ul = '<ul class="pagination">' + lis.join("") + '</ul>';
obj.append(ul);
},
//创建页码
createPageNo: function (pageNo, pageCurrent) {
var pageLi = '<li>';
if (pageNo == pageCurrent) {
pageLi = '<li class="active">';
}
pageLi += '<a href="#" data="' + pageNo + '">' + pageNo + '</a></li>';
return pageLi;
},
//创建前三页
firstThreePageNo: function () {
var lis = [];
for (var pageNo = 1; pageNo <= 3; pageNo++) {
lis.push(methods.createPageNo(pageNo));
}
lis.push("<li><a>...</a></li>");
return lis.join("");
},
//创建后三页
lastThreePageNo: function (pageTotal) {
var lis = [];
lis.push('<li><a>...</a></li>');
for (var pageNo = pageTotal - 2; pageNo <= pageTotal; pageNo++) {
lis.push(methods.createPageNo(pageNo));
}
return lis.join("");
},
//创建上一页
createPrevElement: function (prevPage) {
var prevLi = '<li class="prev"><a href="#" data="' + prevPage + '">«上一页</a></li>';
if (prevPage < 1) {
prevLi = '<li class="prev disabled"><a data="' + prevPage + '">«上一页</a></li>';
}
return prevLi;
},
//创建下一页
createNextElement: function (nextPage, pageTotal) {
var nextLi = '<li class="next"><a href="#" data="' + nextPage + '">下一页»</a></li>';
if (nextPage > pageTotal) {
nextLi = '<li class="next disabled"><a data="' + nextPage + '">下一页»</a></li>';
}
return nextLi;
}
};
//暴露接口
$.fn.Pager = function (option) {
var option = $.extend({
total:0,//总页数
pageSize: 20,//每页大小
pageCurrent: 1, //当前页码
callback:function(){}
}, option);
methods.init(this, option);
};
})(jQuery, window, document);
</script>
<title>分页插件</title>
<script type="text/javascript">
$(function () {
$("#pager").Pager({
total:200,
pageSize: 10,//每页大小
pageCurrent: 8, //当前页码
callback:null
});
});
</script>
</head>
<body>
<div id="pager"></div>
</body>
</html>