<html>
<head>
<title>原生js分页插件</title>
<style>
/*分页样式 start*/
#pag_li_ {
/*分页页码 <li> 的样式*/
display: inline-block;
min-width: 30px;
height: 28px;
cursor: pointer;
color: black;
line-height: 28px;
background-color: white;
border: 1px solid rgba(217, 217, 217, 1);
text-align: center;
margin: 0 4px;
border-radius: 3px;
}
#pag_li_:hover {
/*悬停样式*/
background-color: #D1A85F;
border-color: #D1A85F;
color: #FFF
}
li.xl-disabled:hover {
/*省略的页码按钮 ...按钮*/
background-color: #f9f9f9 !important;
border: 1px solid #dce0e0 !important;
color: #666 !important;
}
li.xl-jumpText:hover {
background-color: rgba(0, 0, 0, 0) !important;
border-color: rgba(0, 0, 0, 0) !important;
}
#xlJumpNum {
width: 50px;
border-radius: 4px;
border: 1px solid rgba(217, 217, 217, 1);
height: 27px;
text-align: center;
outline: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
input[type="number"] {
-moz-appearance: textfield;
}
/*分页样式 end*/
</style>
</head>
<body>
<!--PC端分页容器-->
<div id="pageSea"></div>
<!--PC端分页容器-->
<div id="pageSea2"></div>
</body>
</html>
<script>
var Paging = (function () {
function Paging(elementName, options) {
this.elementName = elementName;
this.options = options;
options.nowPage = options.nowPage >= 1 ? options.nowPage : 1;
options.pageNum = options.pageNum > 0 ? options.pageNum : 0;
options.canJump = options.canJump || 0;
options.showOne = options.showOne || 0;
options.buttonNum = (options.buttonNum >= 5 ? options.buttonNum : 5) || 7;
this.nowPage = options.nowPage > options.pageNum ? options.pageNum : options.nowPage;
this.pageNum = options.pageNum < 0 ? 0 : options.pageNum;
this.canJump = options.canJump;
this.showOne = options.showOne;
this.buttonNum = options.buttonNum;
this.callback = options.callback;
this.element = document.getElementById(elementName);
this.init();
}
Paging.prototype.init = function () {
this.createHtml();
};
Paging.prototype.createHtml = function () {
var _this = this;
var content = [];
//如果pageNum小于等于0则不渲染
if (this.pageNum <= 0) {
return '';
}
//如果只有一页并且设置为不显示，则不进行渲染
if (!this.showOne && this.pageNum === 1) {
this.element.innerHTML = '';
return '';
}
content.push("<ul>");
content.push("<li id='pag_li_' class='xl-prevPage'><</li>");
//页面总数小于等于当前要展示页数总数，展示所有页面
if (this.pageNum <= this.buttonNum) {
for (var i = 1; i <= this.pageNum; i++) {
if (this.nowPage !== i) {
content.push("<li id='pag_li_'>" + i + "</li>");
}
else {
content.push("<li id='pag_li_' class='xl-active' style='background-color: #D1A85F;border-color: #D1A85F;color: #FFF;'>" + i + "</li>");
}
}
}
else if (this.nowPage <= Math.floor(this.buttonNum / 2)) {
//当前页面小于等于展示页数总数的一半（向下取整），从1开始
for (var i = 1; i <= this.buttonNum - 2; i++) {
if (this.nowPage !== i) {
content.push("<li id='pag_li_'>" + i + "</li>");
}
else {
content.push("<li id='pag_li_' class='xl-active' style='background-color: #D1A85F;border-color: #D1A85F;color: #FFF;'>" + i + "</li>");
}
}
content.push("<li id='pag_li_' class='xl-disabled' style='opacity: .5;cursor: no-drop;'>...</li>");
content.push("<li id='pag_li_'>" + this.pageNum + "</li>");
}
else if (this.pageNum - this.nowPage <= Math.floor(this.buttonNum / 2)) {
//当前页面大于展示页数总数的一半（向下取整）
content.push("<li id='pag_li_'>" + 1 + "</li>");
content.push("<li id='pag_li_' class='xl-disabled' style='opacity: .5;cursor: no-drop;'>...</li>");
for (var i = this.pageNum - this.buttonNum + 3; i <= this.pageNum; i++) {
if (this.nowPage !== i) {
content.push("<li id='pag_li_'>" + i + "</li>");
}
else {
content.push("<li id='pag_li_' class='xl-active' style='background-color: #D1A85F;border-color: #D1A85F;color: #FFF;'>" + i + "</li>");
}
}
}
else {
//前半部分页码
if (this.nowPage - Math.floor(this.buttonNum / 2) <= 0) {
for (var i = 1; i <= Math.floor(this.buttonNum / 2); i++) {
if (this.nowPage !== i) {
content.push("<li id='pag_li_'>" + i + "</li>");
}
else {
content.push("<li id='pag_li_' class='xl-active' style='background-color: #D1A85F;border-color: #D1A85F;color: #FFF;'>" + i + "</li>");
}
}
}
else {
content.push("<li id='pag_li_'>" + 1 + "</li>");
content.push("<li id='pag_li_' class='xl-disabled' style='opacity: .5;cursor: no-drop;'>...</li>");
for (var i = this.nowPage - Math.floor(this.buttonNum / 2) + (this.buttonNum % 2 == 0 ? 3 : 2); i <= this.nowPage; i++) {
if (this.nowPage !== i) {
content.push("<li id='pag_li_'>" + i + "</li>");
}
else {
content.push("<li id='pag_li_' class='xl-active' style='background-color: #D1A85F;border-color: #D1A85F;color: #FFF;'>" + i + "</li>");
}
}
}
//后半部分页码
if (this.pageNum - this.nowPage <= 0) {
for (var i = this.nowPage + 1; i <= this.pageNum; i++) {
content.push("<li id='pag_li_'>" + i + "</li>");
}
}
else {
for (var i = this.nowPage + 1; i <= this.nowPage + Math.floor(this.buttonNum / 2) - 2; i++) {
content.push("<li id='pag_li_'>" + i + "</li>");
}
content.push("<li id='pag_li_' class='xl-disabled' style='opacity: .5;cursor: no-drop;'>...</li>");
content.push("<li id='pag_li_'>" + this.pageNum + "</li>");
}
}
content.push("<li id='pag_li_' class='xl-nextPage'>></li>");
if (this.canJump) {
content.push("<li id='pag_li_' class='xl-jumpText xl-disabled' style='opacity: .5;cursor: no-drop;background-color: rgba(0, 0, 0, 0);border-color: rgba(0, 0, 0, 0);opacity: 1;'>共" + this.pageNum + "页<input type='number' id='xlJumpNum'>页</li>");
content.push("<li id='pag_li_' class='xl-jumpButton' style='padding: 0 5px;'>跳转</li>");
}
content.push("</ul>");
this.element.innerHTML = content.join('');
this.element.setAttribute('style', 'margin:20px auto;color:#666;text-align:center;');
// DOM重新生成后每次调用是否禁用button
setTimeout(function () {
_this.disabled();
_this.bindClickEvent();
}, 20);
};
Paging.prototype.bindClickEvent = function () {
var _this = this;
var liList = this.element.children[0].children;
var _loop_1 = function (i) {
liList[i].removeEventListener('click', function () {
_this.clickEvent(liList[i]);
});
};
for (var i = 0; i < liList.length; i++) {
_loop_1(i);
}
var _loop_2 = function (i) {
liList[i].addEventListener('click', function () {
_this.clickEvent(liList[i]);
});
};
for (var i = 0; i < liList.length; i++) {
_loop_2(i);
}
};
Paging.prototype.clickEvent = function (li) { //点击事件
var cla = li.className;
var num = parseInt(li.innerHTML);
var nowPage = this.nowPage;
if (li.className.indexOf('xl-disabled') !== -1 || cla === 'xl-jumpText') {
return '';
}
if (cla === 'xl-prevPage') { //点击上一页
if (nowPage >= 1) {
this.nowPage -= 1;
}
}
else if (cla === 'xl-nextPage') { //点击下一页
if (nowPage < this.pageNum) {
this.nowPage += 1;
}
}
else if (cla === 'xl-jumpButton') { //点击跳转按钮
var el = document.getElementById('xlJumpNum');//获取页码输入框的值
//没有输入正整数 或 大于总页数 或小于0
if (!(/(^[1-9]\d*$)/.test(Number(el.value))) || Number(el.value) > this.pageNum || Number(el.value) <= 0) {
alert('请输入合法的页码！');
el.value = ''; //清空页码输入框
return false;
} else {
this.nowPage = Number(el.value);
}
} else {
this.nowPage = num;
}
this.createHtml();
if (this.callback) {
this.callback(this.nowPage); //回调
}
};
Paging.prototype.disabled = function () {
var nowPage = this.nowPage;
var pageNum = this.pageNum;
var liList = this.element.children[0].children;
if (nowPage === 1) {
for (var i = 0; i < liList.length; i++) {
if (liList[i].className.indexOf('xl-prevPage') !== -1) {
liList[i].setAttribute('class', liList[i].getAttribute('class').concat(' xl-disabled'));
}
}
}
else if (nowPage === pageNum) {
for (var i = 0; i < liList.length; i++) {
if (liList[i].className.indexOf('xl-nextPage') !== -1) {
liList[i].setAttribute('class', liList[i].getAttribute('class').concat(' xl-disabled'));
}
}
}
};
return Paging;
}());
new Paging('pageSea', {
nowPage: 1, // 当前页
pageNum: 12, // 总页数
buttonNum: 7, // 要展示的页码数量
canJump: 1, // 是否显示跳转功能跳转 0(默认):不显示 1:显示
showOne: 0, // 只有一页时，是否显示 0:不显示 1(默认):显示
callback: function (cpage) { //回调函数
alert(cpage);
}
})
new Paging('pageSea2', {
nowPage: 1, // 当前页
pageNum: 24, // 总页数
buttonNum: 7, // 要展示的页码数量
canJump: 0, // 是否显示跳转功能跳转 0(默认):不显示 1:显示
showOne: 0, // 只有一页时，是否显示 0:不显示 1(默认):显示
callback: function (cpage) { //回调函数
alert(cpage);
}
})
</script>
