原生js的分页插件

Posted 2020-12-11 皓月长歌~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js的分页插件相关的知识，希望对你有一定的参考价值。

    <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)
            }
        })