分页效果
实现
html
<div class="pagediv"></div>
<script>
$(".pagediv").createPage({
pageNum:100,//总页码
current: 1,//当前页码
backfun: function (e) {
//页面跳转的操作
}
});
</script>
css
div.pagediv {
text-align: center;
color: #999999;
}
div.pagediv a {
text-decoration: none;
}
div.pagediv span,
div.pagediv a {
display: inline-block;
box-sizing: border-box;
}
.current {
color: #ffffff;
background: #0168fa;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 3px;
}
.zxfPagenum {
color: #666;
background: #fff;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 5px;
border-radius: 3px;
}
.nextpage {
margin: 0 5px;
}
.nextbtn,
.prebtn,
span.disabled {
color: #666;
background: #fff;
width: 88px;
height: 42px;
line-height: 42px;
border-radius: 3px;
}
.zxfinput {
width: 50px;
height: 42px;
text-align: center;
box-sizing: border-box;
border: 1px solid #E6E6E6;
margin: 0 12px;
border-radius: 3px;
color: #666;
}
.zxfokbtn {
width: 48px;
height: 32px;
line-height: 32px;
border: 1px solid #E6E6E6;
margin-left: 10px;
cursor: pointer;
border-radius: 3px;
background: #fff;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
jquery
(function ($) {
var zp = {
init: function (obj, pageinit) {
return (function () {
zp.addhtml(obj, pageinit);
obj.off(); // 加上这句,每次调用都会清除之前的事件委托
zp.bindEvent(obj, pageinit);
}());
},
addhtml: function (obj, pageinit) {
return (function () {
obj.empty();
/*上一页*/
if (pageinit.current > 1) {
obj.append('<a href="javascript:;" class="prebtn">上一页</a>');
} else {
obj.remove('.prevPage');
obj.append('<span class="disabled">上一页</span>');
}
/*中间页*/
if (pageinit.current > 4 && pageinit.pageNum > 4) {
obj.append('<a href="javascript:;" class="zxfPagenum">' + 1 + '</a>');
obj.append('<a href="javascript:;" class="zxfPagenum">' + 2 + '</a>');
obj.append('<span>...</span>');
}
if (pageinit.current > 4 && pageinit.current <= pageinit.pageNum - 5) {
var start = pageinit.current - 2,
end = pageinit.current + 2;
} else if (pageinit.current > 4 && pageinit.current > pageinit.pageNum - 5) {
var start = pageinit.pageNum - 4,
end = pageinit.pageNum;
} else {
var start = 1,
end = 9;
}
for (; start <= end; start++) {
if (start <= pageinit.pageNum && start >= 1) {
if (start == pageinit.current) {
obj.append('<span class="current">' + start + '</span>');
} else if (start == pageinit.current + 1) {
obj.append('<a href="javascript:;" class="zxfPagenum nextpage">' + start + '</a>');
} else {
obj.append('<a href="javascript:;" class="zxfPagenum">' + start + '</a>');
}
}
}
if (end < pageinit.pageNum) {
obj.append('<span>...</span>');
}
/*下一页*/
if (pageinit.current >= pageinit.pageNum) {
obj.remove('.nextbtn');
obj.append('<span class="disabled">下一页</span>');
} else {
obj.append('<a href="javascript:;" class="nextbtn">下一页</a>');
}
/*尾部*/
obj.append('<span>' + '共' + '<b>' + pageinit.pageNum + '</b>' + '页,' + '</span>');
obj.append('<span>' + '到第' + '<input type="number" class="zxfinput" value="5"/>' + '页' + '</span>');
obj.append('<span class="zxfokbtn">' + '确定' + '</span>');
}());
},
bindEvent: function (obj, pageinit) {
return (function () {
obj.on("click", "a.prebtn", function () {
var cur = parseInt(obj.children("span.current").text());
var current = $.extend(pageinit, {
"current": cur - 1
});
zp.addhtml(obj, current);
if (typeof (pageinit.backfun) == "function") {
pageinit.backfun(current);
}
});
obj.on("click", "a.zxfPagenum", function () {
var cur = parseInt($(this).text());
var current = $.extend(pageinit, {
"current": cur
});
zp.addhtml(obj, current);
if (typeof (pageinit.backfun) == "function") {
pageinit.backfun(current);
}
});
obj.on("click", "a.nextbtn", function () {
var cur = parseInt(obj.children("span.current").text());
var current = $.extend(pageinit, {
"current": cur + 1
});
zp.addhtml(obj, current);
if (typeof (pageinit.backfun) == "function") {
pageinit.backfun(current);
}
});
obj.on("click", "span.zxfokbtn", function () {
var cur = parseInt($("input.zxfinput").val());
var current = $.extend(pageinit, {
"current": cur
});
zp.addhtml(obj, {
"current": cur,
"pageNum": pageinit.pageNum
});
if (typeof (pageinit.backfun) == "function") {
pageinit.backfun(current);
}
});
}());
}
}
$.fn.createPage = function (options) {
var pageinit = $.extend({
pageNum: 15,
current: 1,
backfun: function () {}
}, options);
zp.init(this, pageinit);
}
}(jQuery));