// page.js分页的内容。
var ms = {
init: function (obj, args) {
return (function () {
ms.fillHtml(obj, args);
ms.bindEvent(obj, args);
})();
},
//填充html
fillHtml: function (obj, args) {
return (function () {
obj.empty();
//下拉框（自己改写）
obj.append('<select class="selectPageCount"><option value="2">2</option><option value="5">5</option><option selected="selected" value="10">10</option><option value="15">15</option><option value="20">20</option><option value="25">25</option><option value="30">30</option><option value="50">50</option><option value="100">100</option></select>');
//上一页
if (args.current > 1) {
obj.append('<a href="javascript:;" class="prevPage"><上一页</a>');
} else {
obj.remove('.prevPage');
obj.append('<span class="disabled"><上一页</span>');
}
//中间页码
if (args.current != 1 && args.current >= 4 && args.pageCount != 4) {
obj.append('<a href="javascript:;" class="tcdNumber">' + 1 + '</a>');
}
if (args.current - 2 > 2 && args.current <= args.pageCount && args.pageCount > 5) {
obj.append('<span>...</span>');
}
var start = args.current - 2, end = parseInt(args.current) + 2;
if ((start > 1 && args.current < 4) || args.current == 1) {
end++;
}
if (args.current > args.pageCount - 4 && args.current >= args.pageCount) {
start--;
}
for (; start <= end; start++) {
if (start <= args.pageCount && start >= 1) {
if (start != args.current) {
obj.append('<a href="javascript:;" class="tcdNumber">' + start + '</a>');
} else {
obj.append('<span class="current">' + start + '</span>');
}
}
}
if (args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5) {
obj.append('<span>...</span>');
}
if (args.current != args.pageCount && args.current < args.pageCount - 2 && args.pageCount != 4) {
obj.append('<a href="javascript:;" class="tcdNumber">' + args.pageCount + '</a>');
}
//下一页
if (args.current < args.pageCount) {
obj.append('<a href="javascript:;" class="nextPage">下一页></a>');
} else {
obj.remove('.nextPage');
obj.append('<span class="disabled">下一页></span>');
}
obj.append('<span class="pagecount">共' + args.pageCount + '页</span>');
//跳转页码
if (args.turndown == 'true') {
obj.append('<span class="countYe">到第<input type="text" maxlength=' + args.pageCount.toString().length + '>页<a href="javascript:;" class="turndown">确定</a><span>');
}
})();
},
//绑定事件
bindEvent: function (obj, args) {
return (function () {
obj.on("click", "a.tcdNumber", function () {
var current = parseInt($(this).text());
ms.fillHtml(obj, { "current": current, "pageCount": args.pageCount, "turndown": args.turndown });
if (typeof (args.backFn) == "function") {
args.backFn(current);
}
});
//select下拉框
//obj.on("onchange", "select.selectPageCount", function () {
// var pageCount = $(".selectPageCount option:selected").val();
// ms.fillHtml(obj, { "current": args.current, "pageCount": pageCount, "turndown": args.turndown });
// if (typeof (args.backFn) == "function") {
// args.backFn(current - 1);
// }
//});
//上一页
obj.on("click", "a.prevPage", function () {
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj, { "current": current - 1, "pageCount": args.pageCount, "turndown": args.turndown });
if (typeof (args.backFn) == "function") {
args.backFn(current - 1);
}
});
//下一页
obj.on("click", "a.nextPage", function () {
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj, { "current": current + 1, "pageCount": args.pageCount, "turndown": args.turndown });
if (typeof (args.backFn) == "function") {
args.backFn(current + 1);
}
});
//跳转
obj.on("click", "a.turndown", function () {
var page = $("span.countYe input").val();
if (page > args.pageCount) {
alert("您的输入有误，请重新输入！");
}
ms.fillHtml(obj, { "current": page, "pageCount": args.pageCount, "turndown": args.turndown });
//自己后来加上放开的，获取当前页数
if (typeof (args.backFn) == "function") {
args.backFn(page);
}
});
})();
}
}
$.fn.createPage = function (options) {
var args = $.extend({
pageCount: 10,
current: 1,
turndown: true,
backFn: function () { }
}, options);
ms.init(this, args);
}
//css部分
/*分页*/
a{text-decoration:none;}
.pageDiv{padding: 15px 20px;text-align: right;color: #ccc;clear: both;position:relative;}
.pageDiv a{display: inline-block;color: #4c4c4c;background: #f6fbf9;display: inline-block;height: 25px; line-height: 25px; padding: 0px 1vw;border: 1px solid #ddd; margin: 0 2px;vertical-align: middle;font-size: 14px;}
.pageDiv a:hover{text-decoration: none;border: 1px solid #428bca;}
.pageDiv span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 1vw;margin: 0 2px;color: #ed601b;border-radius: 4px;vertical-align: middle;}
.pageDiv span.disabled{display: inline-block;height: 25px;line-height: 25px;padding: 0px 1vw;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;vertical-align: middle;}
.pageDiv span.pagecount{padding: 0 1vw;font-size: 14px;color: #999999;margin-right: -30px;}
.pageDiv span.countYe{color: #4C4C4C;font-size: 14px;margin-left: 30px;}
.pageDiv span.countYe input{float:none;outline: none;border: 1px solid #ddd;height: 25px;padding: 0px 10px; 6%;margin: 0 5px;}
.pageDiv a.turndown{padding: -5px 10px;}
.pageDiv select{
6%;
height: 25px;
outline:none;
border:1px solid #ddd;
margin-right:5px;
}
.pageDivc select option{
position:absolute;
left:0;
top:0;
}
//
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="Scripts/page.css" rel="stylesheet" />
</head>
<body>
<!--分页-->
<div class="row" style="padding-top:18px;background:#eee;">
<div class="col-xs-12 col-sm-12" style="background:#eee;">
<div class="pageDiv"></div>
</div>
<div class="col-xs-12 col-sm-12" style="background:#eee;">
<div class="pageDiv" id="pageDivtest"></div>
</div>
</div>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/page.js"></script>
</body>
</html>
<script>
$(function () {
$(".pageDiv").createPage({
pageCount: 2000,//总页数
current: 1,//当前页
turndown: 'true',//是否显示跳转框，显示为true，不现实为false,一定记得加上引号...
backFn: function (p) {
alert(p);
debugger;
console.log(p);
}
});
$("#pageDivtest").createPage({
pageCount: 100,//总页数
current: 1,//当前页
turndown: 'true',//是否显示跳转框，显示为true，不现实为false,一定记得加上引号...
backFn: function (p) {
alert(p);
debugger;
console.log(p);
}
});
})
</script>