面向对象的分页器

月半小夜屈

已于 2022-05-19 19:47:22 修改

阅读量147

点赞数

于 2022-05-19 19:26:58 首次发布

本文链接：https://blog.csdn.net/qq_41599604/article/details/124869708

版权

效果图

1.首先准备放分页器的容器

<body>
    <div class="container">

    </div>
</body>

2.js代码

<script>
    
    function Page(classname, pageObj = {},array) {
        this.container = document.querySelector(`.${classname}`)
        this.box = document.createElement('div')
        this.pageObj=pageObj
        this.array=array
        // 定义放页码的盒子
        this.pagebox=null
        // 定义当前页
        this.currentPage = 1
        //阻止选中文本
        this.box.onselectstart = () => false

        this.setStyle(this.box,{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            cursor: 'pointer'
        })
        this.container.appendChild(this.box)
    
        //设置默认的参数对象
        this.defaultObj = {
            language: {
                first: '首页',
                prev: '上一页',
                pagination: '',
                next: '下一页',
                last: '尾页'
            },
            pageData:{
                total:100,
                size:12
            }
        }
        
        this.exchange()
         // 定义总页数
        this.totalpage=Math.ceil(this.defaultObj.pageData.total/this.defaultObj.pageData.size)
        this.createbox()
        this.createpage()
        this.click()
        this.disabled()
        this.goto()
    }

    // 添加文本框和按钮的方法
    Page.prototype.goto=function(){
        let input=document.createElement('input')
        this.setStyle(input,{
            width: '70px',
            height: '27px',
            outline: 'none',
            border: '1px solid #cccc',
            margin: '5px',
            'padding-left': '6px'
        })
        input.className='pagesinput'
        this.box.appendChild(input)

        let button=document.createElement('button')
        button.innerText='Go'
        this.setStyle(button,{
            height: '31px',
            margin: '5px',
            border: '1px solid #ccc',
            'background-color': 'skyblue',
            outline: 'none'
        })
        button.className='goto'
        this.box.appendChild(button)
    }
    //禁用按钮的方法
    Page.prototype.disabled=function(){
        if(this.currentPage==1){
            this.box.children[0].style.backgroundColor='#eee'
            this.box.children[1].style.backgroundColor='#eee'
        }else{
            this.box.children[0].style.backgroundColor='#fff'
            this.box.children[1].style.backgroundColor='#fff'
        }

        if(this.currentPage==this.totalpage){
            this.box.children[3].style.backgroundColor='#eee'
            this.box.children[4].style.backgroundColor='#eee'
        }else{
            this.box.children[3].style.backgroundColor='#fff'
            this.box.children[4].style.backgroundColor='#fff'
        }
    }
    //点击按钮的方法
    Page.prototype.click=function(){
        this.box.onclick = e =>{
            let target=e.target
            if(target.className=='first'&&this.currentPage!=1){
                this.currentPage=1
                this.createpage()
                this.disabled()
            }
            if(target.className=='prev'&&this.currentPage!=1){
                this.currentPage--
                this.createpage()
                this.disabled()
            }
            if(target.className=='next'&&this.currentPage!=this.totalpage){
                this.currentPage++
                this.createpage()
                this.disabled()
            }
            if(target.className=='last'&&this.currentPage!=this.totalpage){
                this.currentPage=this.totalpage
                this.createpage()
                this.disabled()
            }
            if(target.nodeName=='P'&&target.innerText!=this.currentPage){
                this.currentPage=target.innerText-0
                this.createpage()
                this.disabled()
            }

            let input=this.box.querySelector('.pagesinput')
            if(target.className=='goto'&&this.currentPage!=input.value){
                
                if(isNaN(input.value)){
                    input.value=''
                    input.placeholder='请输入数字'
                    return
                } 
                if(input.value>this.totalpage){
                    this.currentPage=this.totalpage
                    
                }else if(input.value<1){
                    this.currentPage=1
                }else{
                    this.currentPage=input.value-0
                }
                this.createpage()
                this.disabled()
            }
        }
        
    }
    //渲染页码的方法
    Page.prototype.createpage=function(){
        this.pagebox.innerHTML=''
        if(this.totalpage>5){
            if(this.currentPage<=3){
                this.createpagebox(1,5)
            }else if(this.currentPage>=this.totalpage-2){
                this.createpagebox(this.totalpage-4,this.totalpage)
            }else{
                this.createpagebox(this.currentPage-2,this.currentPage+2)
            }
        }else {
            this.createpagebox(1,this.totalpage)
        }
    }
    //创建页码盒子的方法
    Page.prototype.createpagebox=function(start,end){
        for(let i=start;i<=end;i++){
                    let p=document.createElement('p')
                    p.innerText=i
                    p.className='pages'
                    this.pagebox.appendChild(p)
                    this.setStyle(p,{
                        padding: '5px',
                        margin: '5px',
                        border: '1px solid #ccc'
                    })
                    if(this.currentPage==i){
                        p.style.backgroundColor='skyblue'
                    }
                }
    }
    //创建多个按钮小盒子的方法
    Page.prototype.createbox=function(){
        for (let key in this.defaultObj.language) {
            let smallbox = document.createElement('div')
            smallbox.innerText =this.defaultObj.language[key]
            smallbox.className=key
            this.box.appendChild(smallbox)
            // 除了放页码的盒子都修饰样式
            if(key!='pagination'){
                this.setStyle(smallbox,{
                    margin: '5px',
                    padding: '5px',
                    border: '1px solid #333'
                })
            }else{
                this.pagebox=smallbox
                this.setStyle(this.pagebox,{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center'
                })
            }
            
        }
    }
    
    //将默认的对象的键值替换传进来的对象的键值的方法
    Page.prototype.exchange=function(){
        for(let key in this.pageObj.language){
                this.defaultObj.language[key]=this.pageObj.language[key]
            }
            for(let key in this.pageObj.pageData){
                this.defaultObj.pageData[key]=this.pageObj.pageData[key]
            }
    }

    // 批量设置样式的方法
    Page.prototype.setStyle=function(ele,obj){
        for(let key in obj){
            ele.style[key]=obj[key]
        }
    }

3.new创建对象

 new Page('container',{
        language:{
        first: '|<<',
        prev: '<',
        next: '>',
        last: '>>|'
    },
    pageData:{
        total:1000,
        size:13
    }
    }
    
    )

月半小夜屈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象的分页器

1.首先准备放分页器的容器<body> <div class="container"> </div></body>2.js代码<script> function Page(classname, pageObj = {},array) { this.container = document.querySelector(`.${classname}`) this.bo
复制链接

扫一扫