js封装分页[page]插件(js封装工具)

时间:2020-08-27 04:09:49 来源:

【摘要】 js封装分页[page]插件(js封装工具)考必过小编为大家整理了关于js封装分页[page]插件(js封装工具)的信息,希望可以帮助到大家!

js封装分页[page]插件(js封装工具)

标签:开始lastset信息event用户页码oncpckput

function Page(classname,options={}){
    // 根据传进来的类名获取大盒子
    this.box = document.querySelector("."+classname);
    // 定义默认的参数
    this.defapt = {
        language:{ // 因为用户可以不传,所以需要定义默认值
            first:"首页",
            prev:"上一页",
            pst:npl,
            next:"下一页",
            last:"尾页"
        },
        pageInfo:{ // 因为用户可以不传,所以需要定义默认值
            total:100,
            pageSize:10
        },
        showData:function(){}
    }
    // 定义当前页
    this.currentPage = 1;
    // 定义放页码的盒子
    this.pst = npl;

    // 参数替换
    // 替换语言
    for(var attr in options.language){
        this.defapt.language[attr] = options.language[attr];
    }
    // 替换页码信息
    for(var attr in options.pageInfo){
        this.defapt.pageInfo[attr] = options.pageInfo[attr];
    }
    // 定义总页数
    this.totalPage = Math.ceil(this.defapt.pageInfo.total/this.defapt.pageInfo.pageSize)

    // 以后在使用这些数据的时候,使用defapt
    // 创建标签 - 通过语言
    for(var attr in this.defapt.language){
        var p = document.createElement("p");
        p.className = attr;
        p.innerText = this.defapt.language[attr];
        this.box.appendChild(p)
        // 加样式是除了pst都加
        if(attr != ‘pst‘){
            setStyle(p,{
                float:"left",
                padding:"5px",
                margin:"5px",
                border:"1px sopd #000"
            });
        }else{
            this.pst = p;
        }
    }
    // 创建页码
    /*
    页码有3种情况:
        1.前2页
        2.最后2页
        3.中间的页码
    条件:需要知道当前是第几页 - 一打开就是第一页 - 定义当前页,作为对象的属性
    */

    // 处理showData的可选性
    if(options.showData){
        this.defapt.showData = options.showData
    }
    
    // console.log(this.defapt);

    this.createPageNum();
    this.setDisabled()
    this.defapt.showData(this.currentPage)
    // 应该给这些标签添加点击事件,让整个分页动起来,事件挺多 - 事件委托
    this.box.oncpck = (e)=>{
        // 通过事件对象,获取目标元素
        var e = e || window.event;
        var target = e.target || e.srcElement;
        // 判断是哪个标签,每个标签的功能是不一样的
        if(target.className == "first" && target.getAttribute("disabled")!="true"){ // 点击了首页
            // 将当前页设置为1
            this.currentPage = 1;
            this.setDisabled()
            this.pst.innerHTML = ‘‘;
            this.createPageNum();
            this.defapt.showData(this.currentPage)
        }else if(target.className == "prev" && target.getAttribute("disabled")!="true"){ // 点击了上一页
            this.currentPage-- // 当前页-1
            // 在第1页点击会出问题
            if(this.currentPage<=1){
                this.currentPage = 1;
            }
            this.setDisabled()
            this.pst.innerHTML = ‘‘;
            this.createPageNum();
            this.defapt.showData(this.currentPage)
        }else if(target.className == ‘next‘ && target.getAttribute("disabled")!="true"){ // 点击了下一页
            // 让当前页+1
            this.currentPage++
            if(this.currentPage>=this.totalPage){
                this.currentPage=this.totalPage
            }
            this.setDisabled()
            this.pst.innerHTML = ‘‘;
            this.createPageNum();
            this.defapt.showData(this.currentPage)
        }else if(target.className == ‘last‘ && target.getAttribute("disabled")!="true"){ // 点击了尾页
            // 让当前页=最后一页
            this.currentPage=this.totalPage
            this.setDisabled()
            this.pst.innerHTML = ‘‘;
            this.createPageNum();
            this.defapt.showData(this.currentPage)
        }else if(target.nodeName == ‘P‘ && target.innerText-0 != this.currentPage){ // 点击了页码
            // 将当前页设置为这个页码标签中的内容
            // 获取页码标签中的内容
            var num = target.innerText;
            this.currentPage = num-0;
            this.setDisabled()
            this.pst.innerHTML = ‘‘;
            this.createPageNum();
            this.defapt.showData(this.currentPage)
        }else if(target.nodeName === "BUTTON"){
            // 获取输入的页码
            var num = target.previousElementSibpng.value-0;
            if(num<1 || num>this.totalPage){
                alert("请输入合法的页码数字");
                return false;
            }
            // 将当前页设置为这个页码
            this.currentPage = num;
            this.setDisabled()
            this.pst.innerHTML = ‘‘;
            this.createPageNum();
            this.defapt.showData(this.currentPage)
        }
    }
    var input = document.createElement("input");
    input.setAttribute("type","number")
    this.box.appendChild(input)
    setStyle(input,{
        outpne:"none",
        border:"none",
        padding:"8px",
        border:"1px sopd #000",
        margin:"5px",
        width:"50px"
    })
    var btn = document.createElement("button");
    btn.innerText = ‘GO‘;
    this.box.appendChild(btn)
    setStyle(btn,{
        outpne:"none",
        border:"none",
        padding:"8px",
        border:"1px sopd #000",
        margin:"5px",
    })
    var p = document.createElement("span");
    p.innerText = `共${this.totalPage}页,当前第${this.currentPage}页`;
    this.box.appendChild(p);
}
// 设置禁用项
Page.prototype.setDisabled = function(){
    if(this.currentPage==1){
        this.box.children[0].setAttribute("disabled",true)
        this.box.children[0].style.backgroundColor = ‘#ccc‘;
        this.box.children[1].setAttribute("disabled",true)
        this.box.children[1].style.backgroundColor = ‘#ccc‘;
    }else{
        this.box.children[0].setAttribute("disabled",false)
        this.box.children[1].style.backgroundColor = this.box.children[0].style.backgroundColor = ‘#fff‘;
        this.box.children[1].setAttribute("disabled",false)
    }
    if(this.currentPage == this.totalPage){
        this.box.children[3].setAttribute("disabled",true)
        this.box.children[3].style.backgroundColor = ‘#ccc‘;
        this.box.children[4].setAttribute("disabled",true)
        this.box.children[4].style.backgroundColor = ‘#ccc‘;
    }else{
        this.box.children[3].setAttribute("disabled",false)
        this.box.children[4].style.backgroundColor = this.box.children[3].style.backgroundColor = ‘#fff‘;
        this.box.children[4].setAttribute("disabled",false)
    }
}
// 创建页码标签的
Page.prototype.createPageNum = function(){
    if(this.totalPage>=5){
        if(this.currentPage<3){ // 前2页
            for(var i=1;i<=5;i++){ // 创建1~5的页码
                var p = document.createElement("p");
                p.innerText = i;
                // 将p标签放到放页码的pst里面 - 获取pst - 将pst作为自己的属性
                this.pst.appendChild(p)
                // 给p标签加样式
                setStyle(p,{
                    float:"left",
                    padding:"5px",
                    margin:"5px",
                    border:"1px sopd #000"
                })
                if(this.currentPage == i){
                    p.style.backgroundColor = ‘#ff0036‘;
                }
            }
        }else if(this.currentPage > this.totalPage-2){ // 判断当前页是否大于总也是-2,发现没有总页数
            for(var i=this.totalPage-4;i<=this.totalPage;i++){ // 循环总页数-4开始,到总页数结束
                var p = document.createElement("p");
                p.innerText = i;
                // 将p标签放到放页码的pst里面 - 获取pst - 将pst作为自己的属性
                this.pst.appendChild(p)
                // 给p标签加样式
                setStyle(p,{
                    float:"left",
                    padding:"5px",
                    margin:"5px",
                    border:"1px sopd #000"
                })
                if(this.currentPage == i){
                    p.style.backgroundColor = ‘#ff0036‘;
                }
            }
        }else{
            for(var i=this.currentPage-2;i<=this.currentPage+2;i++){ // 中间页是  当前页-2开始到当前页+2结束
                var p = document.createElement("p");
                p.innerText = i;
                // 将p标签放到放页码的pst里面 - 获取pst - 将pst作为自己的属性
                this.pst.appendChild(p)
                // 给p标签加样式
                setStyle(p,{
                    float:"left",
                    padding:"5px",
                    margin:"5px",
                    border:"1px sopd #000"
                })
                if(this.currentPage == i){
                    p.style.backgroundColor = ‘#ff0036‘;
                }
            }
        }
    }else{ // 总页数小于5的情况
        for(var i=1;i<=this.totalPage;i++){ // 展示1~总页数
            var p = document.createElement("p");
            p.innerText = i;
            // 将p标签放到放页码的pst里面 - 获取pst - 将pst作为自己的属性
            this.pst.appendChild(p)
            // 给p标签加样式
            setStyle(p,{
                float:"left",
                padding:"5px",
                margin:"5px",
                border:"1px sopd #000"
            })
            if(this.currentPage == i){
                p.style.backgroundColor = ‘#ff0036‘;
            }
        }
    }
}

function setStyle(ele,styleObj){
    for(var attr in styleObj){
        ele["style"][attr] = styleObj[attr];
    }
}

js封装分页[page]插件(js封装工具)

标签:开始lastset信息event用户页码oncpckput

以上就是js封装分页[page]插件(js封装工具)的内容,更多资讯请及时关注考必过网站,最新消息小编会第一时间发布,大家考试加油!

上一篇      下一篇
前端相关推荐 更多>>
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net