大二第四周总结——用原生js封装一个分页器

用原生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到5if ((i + 1) == this.page) {       //判断当前页是否等于 当前   索引值（索引值从0开始） +  1str += `<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 {        //如果最大页数小于等于5for (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;        //申明一个常量接收thislet 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天的疲惫

有被一次一次的抛弃，再一次一次的振作

有用自己学到的东西解决问题时候的喜悦

更有无数个加一个瞬间把自己从堕落中拉出来

专研自己的热爱

从书中寻找共鸣

去西安看看那富贵迷人眼

看那没被污染前的海

......