大二第四周总结——用原生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到5
                    if ((i + 1) == this.page) {       //判断当前页是否等于 当前   索引值（索引值从0开始） +  1
                        str += `${i + 1}`;//等于的话说明渲染的是当前页，给当前页一个active的类名进行渲染
                    } else {  //如果渲染的不是当前页
                        str += `${i + 1}`;//普通渲染就行了
                    }
                }
                str += `•••${this.pageNum}`;//最后渲染一个最末尾页
            } else if (this.page > 4 && this.page < this.pageNum - 3) {   //判断当前页是否大于第四页，且小于最大页数减去 3 
                str += `1•••`; //渲染一个首页
                for (let i = this.page - 3; i < this.page + 2; i++) {
                    if ((i + 1) == this.page) { //判断当前正在渲染的是否为当前页
                        str += `${i + 1}`;//如果是当前页，给一个active类名进行渲染
                    } else {
                        str += `${i + 1}`;//如果不是，普通渲染就行
                    }
                }
                str += `•••${this.pageNum}`;//渲染一个尾页
            } else if (this.page >= this.pageNum - 3) {//如果当前页数大于或者等于最大页数 - 3 
                str += `1•••`; //渲染一个首页
                for (let i = this.pageNum - 5; i < this.pageNum; i++) {//从倒数第5页开始渲染
                    if ((i + 1) == this.page) {   //如果渲染的是当前页
                        str += `${i + 1}`;//增加一个active类名，进行渲染
                    } else {
                        str += `${i + 1}`;//否则普通渲染
                    }
                }
            }
        } else {        //如果最大页数小于等于5
            for (let i = 0; i < this.pageNum; i++) {     //直接渲染到当前最大页数
                if ((i + 1) == this.page) {           //判断渲染的是否为当前页数
                    str += `${i + 1}`;//如果是增加一个active类名，进行渲染
                } else {
                    str += `${i + 1}`;//否则普通渲染就行了
                }
            }
        }
        //将所有内容渲染到容器盒子里
        //第一页
        //上一页
        //中间页面
        //下一页
        //最后一页
        this.ele.innerHTML = `
     
         
        
        ${str}
        
        ` ;
    }
    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页面中

只需要防止这样的一个盒子就行了

使用的时候，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天的疲惫

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

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

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

专研自己的热爱

从书中寻找共鸣

去西安看看那富贵迷人眼

看那没被污染前的海

......

一些事情到此完成闭环。

我看到的，我感受的，

回忆太多，可是，经历过的千千万，都抵不过当下这一瞬间的永恒。