html部分
<body>
<div id="pageGination"></div>
</body>
css部分
#pageGination{
height: 28px;
width: 500px;
margin: 50px auto;
background-color: beige;
font-size: 12px;
}
#pageGination ul{
display: flex;
align-items: center;
}
#pageGination ul li{
height: 28px;
width: 28px;
display: inline-block;
line-height: 28px;
text-align: center;
}
#pageGination ul .prePage,#pageGination ul .nextPage{
width: 56px;
}
#pageGination ul .active{
background-color: rgb(0, 0, 255);
color: #fff;
}
#pageGination ul .pageSL{
line-height: 21px;
}
js部分
function Pagegination(obj) {
// 定义变量
this.data = {
//总共页码
pageCount: null,
//添加选中
addActive: null,
// 当前下标
curentIndex: null,
};
// 挂载function
this.currentChange = obj.currentChange;
// 初始化
if (obj) {
this.init(obj);
}
}
// 初始化
Pagegination.prototype.init = function (obj) {
// 标记当前this
const _this = this;
// 解构
const { elementId, pageSize, total, prevText, nextText, curentIndex } = obj;
// 计算页码总数
_this.data.pageCount = Math.ceil(total / pageSize);
// 当前页码
_this.data.curentIndex = curentIndex;
// 渲染模板方法
_this.template(elementId, prevText, nextText);
//页码点击效果
$(`#${elementId}`).on('click', '.pageNum', function () {
$(this).addClass('active').siblings().removeClass('active');
//防止重复点击
if (_this.data.curentIndex === $(this).data('index')) return;
_this.data.curentIndex = $(this).data('index');
typeof _this.currentChange === 'function' &&
_this.currentChange(_this.data.curentIndex);
_this.template(elementId, prevText, nextText);
});
//上一页
let curIndex = null;
$(`#${elementId}`).on('click', '.prePage', function () {
if (_this.data.curentIndex === 1) return;
curIndex = --_this.data.curentIndex;
//判断当前选中页码和下标是否一致
const _index = $(this)
.parent()
.children('.pageNum')
.eq(curIndex - 1)
.data('index');
if (_index !== _this.data.curentIndex) {
_this.template(elementId, prevText, nextText);
} else {
$(this)
.parent()
.children('.pageNum')
.eq(curIndex - 1)
.addClass('active')
.siblings()
.removeClass('active');
}
typeof _this.currentChange === 'function' &&
_this.currentChange(_this.data.curentIndex);
console.log(_this.data.curentIndex);
});
// 下一页
$(`#${elementId}`).on('click', '.nextPage', function () {
if (_this.data.curentIndex === _this.data.pageCount) return;
curIndex = ++_this.data.curentIndex;
//判断当前选中页码和下标是否一致
const _index = $(this)
.parent()
.children('.pageNum')
.eq(curIndex - 1)
.data('index');
if (_index !== _this.data.curentIndex) {
_this.template(elementId, prevText, nextText);
} else {
$(this)
.parent()
.children('.pageNum')
.eq(curIndex - 1)
.addClass('active')
.siblings()
.removeClass('active');
}
typeof _this.currentChange === 'function' &&
_this.currentChange(_this.data.curentIndex);
console.log(_this.data.curentIndex);
});
};
// 渲染模板
Pagegination.prototype.template = function (elementId, prevText, nextText) {
const _this = this;
let template = `<ul> <li class="prePage">${prevText}</li>`;
// 页码总数小于10
if (_this.data.pageCount < 10) {
for (let i = 1; i <= _this.data.pageCount; i++) {
_this.data.addActive = _this.data.curentIndex === i ? 'active' : '';
template += `<li class="pageNum ${_this.data.addActive} " data-index="${i}">${i}</li>`;
}
} else {
if (_this.data.curentIndex <= 5) {
const arr = [1, 2, 3, 4, 5, 6, '...', _this.data.pageCount];
for (let i = 0; i <= arr.length - 1; i++) {
_this.data.addActive =
_this.data.curentIndex === arr[i] ? 'active' : '';
if (arr[i] !== '...') {
template += `<li class="pageNum ${_this.data.addActive}" data-index="${arr[i]}">${arr[i]}</li>`;
} else {
template += `<li class="pageSL">${arr[i]}</li>`;
}
}
} else if (_this.data.curentIndex > _this.data.pageCount - 5) {
const arr = [
1,
'...',
_this.data.pageCount - 6,
_this.data.pageCount - 5,
_this.data.pageCount - 4,
_this.data.pageCount - 3,
_this.data.pageCount - 2,
_this.data.pageCount - 1,
_this.data.pageCount,
];
for (let i = 0; i <= arr.length - 1; i++) {
_this.data.addActive =
_this.data.curentIndex === arr[i] ? 'active' : '';
if (arr[i] !== '...') {
template += `<li class="pageNum ${_this.data.addActive}" data-index="${arr[i]}">${arr[i]}</li>`;
} else {
template += `<li class="pageSL">${arr[i]}</li>`;
}
}
} else {
const arr = [
1,
'...',
_this.data.curentIndex - 2,
_this.data.curentIndex - 1,
_this.data.curentIndex,
_this.data.curentIndex + 1,
_this.data.curentIndex + 2,
'...',
_this.data.pageCount,
];
for (let i = 0; i <= arr.length - 1; i++) {
_this.data.addActive =
_this.data.curentIndex === arr[i] ? 'active' : '';
if (arr[i] !== '...') {
template += `<li class="pageNum ${_this.data.addActive}" data-index="${arr[i]}">${arr[i]}</li>`;
} else {
template += `<li class="pageSL">${arr[i]}</li>`;
}
}
}
}
template += `<li class="nextPage">${nextText}</li></ul>`;
$(`#${elementId}`).html(template);
};
js的调用
new Pagegination({
elementId: 'pageGination',
//当前页码
curentIndex: 1,
//每页展示数据条数
pageSize: 10,
// 展示页码数数量
pageCount: 5,
// 总页码
total: 50,
prevText: '<上一页',
nextText: '下一页>',
currentChange: function (index) {
console.log(index, '选中的页码');
},
});