1. 首页
  2. 文章中心
  3. JavaScript

原生js分页组件

92 阅读 0 评论
我是靠谱客的博主 怕黑短靴，最近开发中收集的这篇文章主要介绍原生js分页组件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

原生js封装分页组件  

废话不多说直接上菜！！！

1、js代码

/**
 * Created by chenru on 2018/5/8.
 */


var pageNation;
pageNation = (function () {
    function extend(target, source) {
        for (var obj in source) {
            target[obj] = source[obj];
        }
        return target;
    }
    function pageNation(options) {
        var defaultOptions = {
            el: "body",//分页父容器  
            page: 1,
            size: 10,
            total: 0,
            styUrl: 'style.css',
            callback: null,
            IsShowBtn: {//设置需要显示的按钮
                choosePageSize: true,//是否显示下拉选项
                IsShowPrevOrNextBtn: true,//否显示上一页下一页按钮
                IsShowEnterBtn: true,//是否显示跳转输入
                IsShowTotalPage:true,//是否显示总页数
            }
        };
        this.options = extend(defaultOptions, options) || {};
        this.options.el = document.querySelectorAll(this.options.el)[0];
        this.pageT = Math.ceil(this.options.total / this.options.size);
        this.init();
        if (!document.querySelector("#dynamic-style")) {
            this.pageStyle();
        }
        //this.options.callback(1,self.options.size,self.options.total);  
    }

    var proto = pageNation.prototype || {};
    proto.rander = function (page, size, total) {
        this.options.page = !!page ? page : 1;
        this.options.size = !!size ? size : 10;
        this.options.total = !!total ? total : 0;//  
        this.pageT = Math.ceil(this.options.total / this.options.size);
        this.init();
        this.page_nation = null;
    };
    proto.init = function () {
        var self = this;
        var pageNum = function (page) {//创建分页器  
            return (function () {
                let ol = document.createElement("ol");
                ol.classList.add("page-ol");
                let p = !!page ? page : 1;
                let tPage = Math.ceil(self.options.total / self.options.size);
                let s = p <= 3 ? 1 : p > (tPage - 3) ? tPage - 4 : p - 2;
        s=s==0?1:s;
                for (let i = s; i < (s + 5); i++) {
                    if (i > tPage) {
                        break;
                    }
                    let li = document.createElement("li");
                    li.innerText = i;
                    if (i == p) {
                        li.classList.add("hover");
                    }
                    ol.appendChild(li);
                }
                return ol;
            })(page);
        };
        var sizeNum = function (size) {//重置size  
            return (function () {
                let select = document.createElement("select");
                select.setAttribute("class", "page-Select");
                let s = !!size ? size : 10;
                //let tPage=Math.ceil(self.options.total/self.options.size);  
                for (let i = 5; i <= (5 * 4); i += 5) {
                    let option = document.createElement("option");
                    option.value = i;
                    option.innerText = i;
                    if (i === self.options.size) {
                        option.setAttribute("selected", "selected");
                    }
                    select.appendChild(option);
                }
                return select;
            })(size);
        };
        var prevBtn = function () {//上一页按钮  
            return (function () {
                let button = document.createElement("span");
                button.setAttribute("class", "prev-btn");
                button.innerText = "上一页";
                if (self.options.page == 1) {
                    button.classList.add("disabled")
                };
                return button;
            })();
        };
        var nextBtn = function () {//下一页按钮  
            return (function () {
                let button = document.createElement("span");
                button.setAttribute("class", "next-btn");
                button.innerText = "下一页";
                if (self.options.page == self.pageT) {
                    button.classList.add("disabled")
                }
                ;
                return button;
            })();
        };
        var pageMark = function () {//页码标识  
            return (function () {
                let span = document.createElement("span");
                span.setAttribute("class", "pageMark");
                span.innerHTML = "<strong>" + self.options.page + "</strong> / <strong>" + Math.ceil(self.options.total / self.options.size) + "</strong>";
                return span;
            })();
        };
        var enterBtn = function () {//跳转按钮  
            return (function () {
                let button = document.createElement("span");
                button.setAttribute("class", "enter-btn");
                let ipt = document.createElement("input");
                ipt.value = self.options.page;
                ipt.setAttribute("type", "text");

                let b = document.createElement("span");
                b.setAttribute("class", "enterBtn");
                b.innerText = "跳转";

                button.appendChild(ipt);
                button.appendChild(b);

                return button;
            })();
        };
        let page_nation = self.options.el.querySelector(".page-nation");
        if (page_nation != null && page_nation != "undefind") {
            page_nation.innerHTML = "";
        }
        else {
            page_nation = document.createElement("div");
            page_nation.classList.add("page-nation");
            self.options.el.appendChild(page_nation);
        }
        page_nation.appendChild(new pageNum(self.options.page));
        self.options.IsShowBtn.choosePageSize&&page_nation.appendChild(new sizeNum(self.options.size));
        self.options.IsShowBtn.IsShowPrevOrNextBtn&&page_nation.appendChild(new prevBtn());
        self.options.IsShowBtn.IsShowPrevOrNextBtn&&page_nation.appendChild(new nextBtn());
        page_nation.appendChild(new pageMark());
        self.options.IsShowBtn.IsShowEnterBtn&&page_nation.appendChild(new enterBtn());

        self.page_nation = document.querySelector(".page-nation");

        this.switchPage(self.options.callback);
        this.switchSize(self.options.callback);
        return self;
    };
    proto.pageStyle = function () {
        let headDoc = document.querySelector("head");
        var linkTag = document.createElement("link");
        var cssURL = this.options.styUrl;
        linkTag.id = 'dynamic-style';
        linkTag.href = cssURL;
        linkTag.setAttribute('rel', 'stylesheet');
        linkTag.setAttribute('media', 'all');
        linkTag.setAttribute('type', 'text/css');
        headDoc.appendChild(linkTag);
    };
    proto.switchPage = function (fun) {
        let self = this;
        let lis = this.page_nation.children[0].children;
        for (let i = 0, len = lis.length; i < len; i++) {
            lis[i].onclick = function () {
                self.options.page = this.innerText;
                self.rander(self.options.page, self.options.size, self.options.total);
            };
        }
        this.options.el.querySelectorAll(".prev-btn")[0].onclick = function (e) {
            //console.time("rr");  
            self.options.page = --self.options.page;
            self.rander(self.options.page, self.options.size, self.options.total);
            //console.timeEnd("rr");  
        };
        this.options.el.querySelectorAll(".next-btn")[0].onclick = function (e) {
            self.options.page = ++self.options.page;
            self.rander(self.options.page, self.options.size, self.options.total);
        };
        this.options.el.querySelectorAll(".enterBtn")[0].onclick = function (e) {
            let val = this.previousElementSibling.value;
            if (!val || val > self.pageT || val < 1) {
                alert("参数超出范围！");
                return false;
            } else {
                self.options.page = val;
                self.rander(self.options.page, self.options.size, self.options.total);
            }
        };
        fun(self.options.page, self.options.size, self.options.total);
    };
    proto.switchSize = function (fun) {
        let self = this;
        let lis = this.page_nation.children[1];
        lis.onchange = function () {
            self.options.size = Number(this.value);
            self.rander(1, self.options.size, self.options.total);
            fun(1, self.options.size, self.options.total);
        }
    };
    return pageNation;
})(); 

2、css样式 （注：样式可自定义）

ol.page-ol{
    display: inline-block;
    line-height: 2em;
    font-size: 1em;
}
ol.page-ol li{
    display: inline-block;
    line-height: 2em;
    font-size: 1em;
    padding:0 .6em;
    cursor:pointer;
    border: 1px solid #ddd;
    margin: 0 .5em;
}
ol.page-ol li:hover,ol.page-ol li.hover,.enter-btn span:hover,.prev-btn:hover,.next-btn:hover,.enter-btn span.hover,.prev-btn.hover,.next-btn.hover{
    background: dodgerblue;
    font-size: 1em;
    color:#fff;
}
.page-Select{
    display: inline-block;
    height: 2em;
    border:1px solid #ddd;
    font-size:1em;
}
.prev-btn,.next-btn{
    display: inline-block;
    line-height: 2em;
    font-size: 1em;
    padding: 0 .6em;
    cursor: pointer;
    border: 1px solid #ddd;
    margin: 0 .5em;
}
.next-btn{}
.pageMark{}
.enter-btn input,#enter-btn span{
    display: inline-block;
    line-height: 2em;
    font-size: 1em;
    padding: 0 .6em;
    cursor: pointer;
    border: 1px solid #ddd;
    /*//width:2em;*/
}
.enter-btn input{
    width:4em;
}
.page-nation {
    display: flow-root;
    text-align: center;
    margin: 2em 0;
}
.disabled{
    background: #C9C9C9!important;
    pointer-events: none;
    color: #fff !important;
}
div,ul,li,ol,table,td,th,span,strong,i,p{
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
}

3、调用方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="page-nation"></div>
  <script src="script/page.js"></script>
  <script>  
    //分页调用方法  
    const Api=new pageNation({  
        el:"#page-nation",//分页器位置  
        page:1,//当前页  
        size:5,//默认5,10,15,20  
        total:100,//数据总条数  
        styUrl:'css/page.css',//样式地址（可修改）  
                IsShowBtn: {//设置需要显示的按钮
                    choosePageSize: true,//是否显示下拉选项
                    IsShowPrevOrNextBtn: true,//是否显示上一页下一页按钮
                    IsShowEnterBtn: true,//是否显示跳转输入
                    IsShowTotalPage:true,//是否显示总页数
                },
        callback:function(page,size,total){  
          console.log(page,size,total);  
          //此处为ajax请求  
  
        }  
    });    
</script>  
</body>
</html>

4、文件夹


错误之处欢迎指正！！！qq:920682207 （备注csdn）



最后

以上就是怕黑短靴为你收集整理的原生js分页组件的全部内容，希望文章能够帮你解决原生js分页组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(61)

相关文章

一个JavaScript 验证API与表单自动验证组件
一个JavaScript 验证API与表单自动验证组件
改写的一个JS表单验证插件
改写的一个JS表单验证插件
利用原生JS做组件通信---自定义事件
利用原生JS做组件通信---自定义事件
公共组件第四章、公共组件
公共组件第四章、公共组件
原生js分页组件
原生js分页组件
js&&html校验组件（非空，格式等）
js&&html校验组件（非空，格式等）
方法 组件_JavaScript的日期/时间组件方法
方法 组件_JavaScript的日期/时间组件方法
JavaScript公共组件父子依赖调用及子校验父条件问题解决
JavaScript公共组件父子依赖调用及子校验父条件问题解决

评论列表共有 0 条评论

立即
投稿
返回
顶部