码迷,mamicode.com
首页 > Web开发 > 详细

原生js的分页插件

时间:2020-06-19 20:45:25      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:清空   封装   字段   query   过多   跳转   point   ==   none   

    <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指针问题就要多注意
 
其实写完还是有点累的,但效果还是挺不错的,思路大致在这里的,标红字段是代码中需要注意的地方,也是写难点,可能有些潦草,多担待呀!

原生js的分页插件

标签:清空   封装   字段   query   过多   跳转   point   ==   none   

原文地址:https://www.cnblogs.com/icon-JIA/p/13166224.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!