原生js的分页插件

时间：2020-06-19 20:45:25 收藏：0 阅读：57

    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .page {
            height: 40px;
            overflow: hidden;
            margin-top: 10px;
        }

        .page .page-content {
            height: 40px;
            float: left;
            margin-left: 10px;
        }

        .page .page-content li {
            width: 40px;
            height: 40px;
            background: #666;
            color: black;
            text-align: center;
            line-height: 40px;
            float: left;
            margin-left: 5px;
            cursor: pointer;
        }

        .page .page-content li.checked {
            background: orange;
            color: red;
        }

        .page span {
            width: 50px;
            height: 40px;
            background: skyblue;
            color: orange;
            text-align: center;
            line-height: 40px;
            float: left;
            margin-left: 10px;
            cursor: pointer;
        }

        .page span.checked {
            background: #999;
            color: #666;
        }
    </style>
</head>

<body>
    <div id="page" class="page">
    </div>

html和css部分，较为常见，常规样式，重点在js部分。

<script>
        // 第一步:构建一个构造函数,携带一个json对象的参数,json指的是大括号里的内容
        function Page(json) {
            this.option = {
                count: 100,//总数据
                pagenum: 10,//每页显示的数据数量
                pageindex: 5//每页显示的页码数量
            }
            Object.assign(this.option, json.data);
            this.callback = json.callback;
            // this.target指向的dom元素，获取元素
            this.target = document.querySelector(json.el);
            // 第三步，根据option里的数据动态生成ul里的li，option里的数据到时候是动态请求的
            this.showpageindex = 1;//显示的页面用checked的class属性
            // 第二步:获取dom元素后，虚拟dom,生成页面,用封装函数来生成调用
            this.creat();
            this.creatdata();
            // this.clickevent();
        }
        Page.prototype.clickevent = function () {
            this.prev.className = ‘checked‘;
            this.next.className = ‘checked‘;
            this.prev.onclick = "";
            this.next.onclick = "";
            // 这里两层函数，需要注意的是this指针指向问题
            if (this.showpageindex != 1) {
                this.prev.onclick = () => {
                    this.showpageindex--;
                    this.creatdata();
                }
                this.prev.className = "";
            }
            if (this.showpageindex != this.maxShowNum) {
                this.next.onclick = () => {
                    this.showpageindex++;
                    this.creatdata();
                }
                this.next.className = "";
                //可以做到切换页面，但会生成重复的dom元素
            }
        }


        Page.prototype.creatdata = function () {
            var middle = Math.floor(this.option.pageindex / 2);//向下取整
            var start = 1;
            var maxShowNum = Math.ceil(this.option.count / this.option.pagenum);//最大页数
            this.maxShowNum = maxShowNum;
            var end = this.option.pageindex;
            end = end > maxShowNum ? maxShowNum : end;//判断自定义的end数，与数据之间生成的最大页数相比关系，避免页码过多

            this.content.innerHTML = "";//这一步操作指向的是clickevent函数的bug问题，生成li之前，先清空li

            if (this.showpageindex > middle) {//如果带class的页码大于中间值之后，因为页码是奇数，就是+-中间值就行
                start = this.showpageindex - middle;
                end = this.showpageindex + middle;
            }
            if (this.showpageindex > (maxShowNum - middle)) {
                start = maxShowNum - this.option.pageindex + 1;
                end = maxShowNum;
            }
            if (start <= 1) {
                start = 1
            }
            var that = this;
            for (var i = start; i <= end; i++) {
                var li = document.createElement(‘li‘);
                li.innerHTML = i;
                if (i == this.showpageindex) {
                    li.className = ‘checked‘;
                }
                this.content.appendChild(li);

                li.onclick = function () {
                    that.showpageindex = this.innerHTML * 1;
                    that.creatdata();
                }
            }
            this.clickevent();
            this.callback(this.showpageindex);
        }


        // 对应的是第二步的封装函数
        Page.prototype.creat = function () {
            // 创造元素并加入到页面中
            this.prev = document.createElement(‘span‘);
            this.prev.className = ‘page-prev‘;
            this.prev.innerHTML = ‘上一页‘;
            this.target.appendChild(this.prev)//写入，appendChild用法

            this.content = document.createElement(‘ul‘);
            this.content.className = ‘page-content‘;
            this.target.appendChild(this.content);

            this.next = document.createElement(‘span‘);
            this.next.className = ‘page-next‘;
            this.next.innerHTML = ‘下一页‘;
            this.target.appendChild(this.next);
        }




        new Page({
            el: "#page",
            data: {
                count: 200,
                pagenum: 10,
                pageindex: 7
            },
            callback: function (showpageindex) {
                console.log(showpageindex)
            }
        })

这里的话，采用的是原生js写的一个分页插件，分享在博客里吧！主要是锻炼编程思维，下面也分享下自己的思路吧

// 分页插件的简单思路,较潦草,可能只有自己可以看懂,

// 第一步：写一个构造函数，定义要绑定的相关dom元素

// 第二步：在创建虚拟dom，写一个封装函数，来实现原本分页的静态页面再次实现

// 第三步：模拟创建一个数据对象，有总数据，每页显示数据，显示的页码数量，来动态生成每一个页码

// 第四步：在封装动态生成函数进行一个循环赋值页码中的数值

// 第五步: 封装点击事件相关函数,上一页和下一页,点击时让显示的页码数据++,或者--,同时让数据主体每次生成时为空,避免重复生成页码数

// 第六步: 同时需要注意,点击时.调用数据生成函数,在显示页码为1时,上一页不可点击,为最大页面时,下一页不可点击

// 第七步: 数据生成时,因为显示的是奇数,所以前后页码数相同,在显示的页码数大于中间值后,进行if判断，一个简单的算法问题

// 第八步: 点击页码时,也可以跳转,在生成li时,写li的点击函数,在内部再次调用数据生成函数,递归

// 参数分离,用Object.assign方法,更新数据

// 回调函数,绑定li是带参数显示的页码数,中间有很多细节,this指针问题就要多注意

其实写完还是有点累的，但效果还是挺不错的，思路大致在这里的，标红字段是代码中需要注意的地方，也是写难点，可能有些潦草，多担待呀！