用原生js封装一个分页器
起因：这次项目还是用原生的js来写的，我负责的是后台，分页是后台最常见的一个功能了，于是干脆封装一下,废话少说，直接上代码
这里是基本的样式
.pagination {
display: flex;
width: 600px;
height: 35px;
margin: 0 auto;
margin-left: 275px;
/* border: 1px solid red; */
}
.pagination span a {
box-sizing: border-box;
text-decoration: none;
color: black;
}
.pagination span {
/* border: 1px solid red; */
text-align: center;
width: 40px;
height: 35px;
line-height: 35px;
margin: 0px 2px;
}
.pagination span i {
font-size: 10px;
font-weight: 100;
}
.pagination span img {
width: 30px;
height: 25px;
}
.pagination .pageStyle a {
display: block;
text-align: center;
width: 40px;
height: 35px;
line-height: 35px;
/* background-color: bisque; */
border: 1px solid #ccc;
border-radius: 5px;
}
.pagination .pageStyle a:hover {
border: 1px solid rgb(27, 129, 121);
}
.pagination .active {
background-color: cadetblue;
}这个是在js里面定义的一个分页器类
class PageClass { //定义一个分页器类
constructor(ele, pageNum, page, cb) { //需要传入4个参数，第一个容器元素，第二个页面总数，第三个当前页面数，第四个为回调函数
this.ele = ele; //定义属性
this.pageNum = pageNum;
this.page = page;
this.cb = cb;
this.renderPage(); //执行渲染的方法
this.operate(); //给实例化对象绑定各种操作的方法
}
renderPage() { //在类的原型上定义一个渲染的方法
let str = '';
if (this.pageNum > 5) { //判断当前分页的页面总数是否超过5页
if (this.page <= 4) { //如果页面总数大于5 ，再判断当前页是否小于或者等于第四页
for (let i = 0; i < 5; i++) { //如果当前页是小于等于4以内的页数 ，遍历1到5
if ((i + 1) == this.page) { //判断当前页是否等于 当前 索引值（索引值从0开始） + 1
str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;" class="active">${i + 1}</a></span>`;//等于的话说明渲染的是当前页，给当前页一个active的类名进行渲染
} else { //如果渲染的不是当前页
str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;">${i + 1}</a></span>`;//普通渲染就行了
}
}
str += `<span><i>•••</i></span><span class="pageStyle" myPage="${this.pageNum}"><a href="javascript:;">${this.pageNum}</a></span>`;//最后渲染一个最末尾页
} else if (this.page > 4 && this.page < this.pageNum - 3) { //判断当前页是否大于第四页，且小于最大页数减去 3
str += `<span class="pageStyle" myPage="1"><a href="javascript:;">1</a></span><span><i>•••</i></span>`; //渲染一个首页
for (let i = this.page - 3; i < this.page + 2; i++) {
if ((i + 1) == this.page) { //判断当前正在渲染的是否为当前页
str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;" class="active">${i + 1}</a></span>`;//如果是当前页，给一个active类名进行渲染
} else {
str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;">${i + 1}</a></span>`;//如果不是，普通渲染就行
}
}
str += `<span><i>•••</i></span><span class="pageStyle" myPage="${this.pageNum}"><a href="javascript:;">${this.pageNum}</a></span>`;//渲染一个尾页
} else if (this.page >= this.pageNum - 3) {//如果当前页数大于或者等于最大页数 - 3
str += `<span class="pageStyle" myPage="1"><a href="javascript:;">1</a></span><span><i>•••</i></span>`; //渲染一个首页
for (let i = this.pageNum - 5; i < this.pageNum; i++) {//从倒数第5页开始渲染
if ((i + 1) == this.page) { //如果渲染的是当前页
str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;" class="active">${i + 1}</a></span>`;//增加一个active类名，进行渲染
} else {
str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;">${i + 1}</a></span>`;//否则普通渲染
}
}
}
} else { //如果最大页数小于等于5
for (let i = 0; i < this.pageNum; i++) { //直接渲染到当前最大页数
if ((i + 1) == this.page) { //判断渲染的是否为当前页数
str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;" class="active">${i + 1}</a></span>`;//如果是增加一个active类名，进行渲染
} else {
str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;">${i + 1}</a></span>`;//否则普通渲染就行了
}
}
}
//将所有内容渲染到容器盒子里
//第一页
//上一页
//中间页面
//下一页
//最后一页
this.ele.innerHTML = `
<span class="first"><a href="javascript:;"> <img src="/public/img/index.png" alt=""></a></span>
<span class="prev"><a href="javascript:;"><img src="/public/img/before.png" alt=""></a></span>
${str}
<span class="next"><a href="javascript:;"><img src="/public/img/after.png" alt=""></a></span>
<span class="last"><a href="javascript:;"><img src="/public/img/end.png" alt=""></a></span>` ;
}
operate() { //在类原型上定义一个operate的方法，给这个类绑定点击事件
const _that = this; //申明一个常量接收this
let firstEle = this.ele.querySelector(".first"); //获取第一页的元素
let lastEle = this.ele.querySelector(".last"); //获取最后一页的元素
let nextEle = this.ele.querySelector(".next"); //获取下一页的元素
let prevEle = this.ele.querySelector(".prev"); //获取上一页的元素
let pageStyleEles = this.ele.querySelectorAll(".pageStyle"); //获取所有的中间页面的元素
firstEle.onclick = function () { //当点击第一页时
_that.page = 1; //让page属性重新赋值为1
_that.cb(_that.page); //并将page属性通过回调函数cb传递出去
}
lastEle.onclick = function () { //当点击最后一页时
_that.page = _that.pageNum; //让page属性重新赋值为页面最大值
_that.cb(_that.page); //并将page属性通过回调函数cb传递出去
}
nextEle.onclick = function () { //当点击下一页时
if (_that.page < _that.pageNum) { //先判断当前页是否小于最大页
_that.page = _that.page + 1; //如果没有超过，给page属性自增1
_that.cb(_that.page); //并将page属性通过回调函数cb传递出去
}
}
prevEle.onclick = function () { //当点击上一页时
if (_that.page > 1) { //先判断当前页是否大于第一页
_that.page = _that.page - 1; //如果是大于第一页的话，page属性自减1
_that.cb(_that.page); //并将page属性通过回调函数cb传递出去
}
}
pageStyleEles.forEach(function (pageStyleEle) { //遍历获取到中间页面的所有元素
pageStyleEle.onclick = function () { //当点击其中一页时
_that.page = parseInt(this.getAttribute("myPage")); //获取这个元素自定义属性，myPage，属性值是当前页 ，并将当前页赋值给page属性
_that.cb(_that.page); //将page属性通过回调函数cb传递出去
}
});
}
}在html页面中
只需要防止这样的一个盒子就行了
<div class="pagination"> </div>使用的时候，js里面这样写
let pageEle = document.querySelector(".pagination"); //获取页面渲染的容器
ready(1); //调用渲染容器的方法，传递初始页面为1
function ready(page) { // 定义一个方法用来渲染容器
new PageClass(pageEle, 1000, page, function (page) { //new 一个PageClass类，传递容器元素，总页面数，当前页面，以及回调函数
console.log(page, '看看点击Page的时候页面是否会发生变化');
ready(page); //回调函数调用渲染容器的方法
getAllUsers(10, page);//这个是自定义的页面变化的时候获取页面数据的渲染表格的方法
});
}整个跑起来大致就是这个样子
至于显示的这个回到首页，上一页，下一页，回到最后一页的图片，可以去阿里妈妈图标库去看看，挑选自己喜欢的。分享到这里就结束了
学技术的话，看到这里就行。
我是分割线
个人的小感悟
很多人可能会选择在过年或者是期末的时候进行总结，那为什么会选择现在进行来一波回忆杀呢？
因为，距离我去年将要加入未来软件工作室就不到4天的时间了。
对我来说，这一年的成长，也许，技术也许是次要的，心理的成长占了绝大部分。
去年的这个时候，来大学快一个月的时间了，对学校的基本情况了解的差不多了，知道了未来是学校最强的小组，一股劲儿的想要来到这里，找到了当时小组大三的学姐，然后学姐把我拉进了未来软件工作室的招新群，等待工作室正式开始招新投简历，然后面试，分到未来五组当中，融入新的团体.......这就是梦的开始，也是很多事情的开始，若要究其根本，命运的齿轮究竟是从什么时候开始转动的 ? 可能是偷偷改志愿学计算机，可能是报考之后在贴吧四处找寻学校信息从此多了一位师父照拂，可能是在知乎找到了熟知学校信息的计算机学姐，从此多了一位领路人，一切的一切，把大学的画卷铺开在我面前......
去年这一年
有难关面前，能成为家人依靠的成就感
有熬夜到凌晨3，4点，连续3天睡眠时间不超过10个小时但依然活力满满的冲劲儿
有趁着水课多，连着整整睡了4，5天的疲惫
有被一次一次的抛弃，再一次一次的振作
有用自己学到的东西解决问题时候的喜悦
更有无数个加一个瞬间把自己从堕落中拉出来
专研自己的热爱
从书中寻找共鸣
去西安看看那富贵迷人眼
看那没被污染前的海
......
一些事情到此完成闭环。
我看到的，我感受的，
回忆太多，可是，经历过的千千万，都抵不过当下这一瞬间的永恒。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
