js 分页组件简单封装

效果

简洁版

pag = loadPag(pagArr,this.el.pagCSelect,this.el.len,this.el.nuMarea,this.el.pagul,limt,offset,80,4,false,false);

.paging{
    padding: 0;
    font-size: 12px;
}
.flexStart{
    display: flex;
    justify-content: flex-start;
}
#pagCSelect{
    margin: 0 2px;
    width: 40px;
}
.presentPage{
    background-color: rgba(92, 251, 255, 1)
}
.pagination ul>li>a{
    color: white;
    padding: 4px 6px;
    background-color:transparent;
    border:none;
}
.pagination ul>li.omit a{
    padding: 4px 0px;
}

代码

调用测试

let limt = 10,offset = 1,len = 76,pagArr = [10,20,40];
limt = pagArr[0]

this.el.pagSelect = document.querySelector("#pagSelect");
this.el.nuMarea = document.querySelector(".nuMarea");
this.el.len = document.querySelector(".len");
this.el.pagul = document.querySelector(".pagul");
len = 99
let pag = loadPag(pagArr,this.el.pagSelect,this.el.len,this.el.nuMarea,this.el.pagul,limt,offset,len);
 // 页码点击触发事件
pag.pageCode(function(res){
    console.log('pageCode:',res)
})
pag.selecthandle(function(res){
    console.log('selecthandle:',arguments)
})

js

window.loadPag = loadPag
/**
 * 加载分页
 * @param {*} pagArr 显示下拉条数组
 * @param {*} elLen 下拉条容器dom
 * @param {*} elLen 显示数据长度dom
 * @param {*} nuMarea 显示数据区间dom
 * @param {*} pagul 显示页码容器dom
 * @param {*} limt 页面数据条数
 * @param {*} offset 页码
 * @param {*} len 数据总条数
 * @param {*} pageLimt 显示页码个数  简洁版 设置小于5
 * @param {*} prev 是否显示 上一页
 * @param {*} next 是否显示 下一页
 * return obj
 *           upPagul 更新页码容器
 *           pageCode 页面点击事件
 *           selecthandle 切换页面数据条数触发
 */
function loadPag(pagArr,pagSelect,elLen,nuMarea,pagul,limt,offset,len,pageLimt,prev=true,next=true){
    
    // 加载分页
    pagSelect.innerHTML = ""
    pagArr.forEach((item,index)=>{
        var option = document.createElement("option")
        option.innerText = item
        option.value = item
        pagSelect.appendChild(option)
    })
    
    pagSelect.selectedIndex = pagArr.findIndex(item=>item==limt)||0
    elLen.innerText = len

    function createLi(text,index){
        var li = document.createElement('li')
        var a = document.createElement('a')
        a.href = "#"
        a.dataset.index = index
        a.innerText = text
        li.classList.add(index)
        li.appendChild(a)
        return li
    }
    
    let selectFun = null
    function selecthandle(fun){
        selectFun = fun
    }
   
    pagSelect.addEventListener("change",pagSelectChange)
    function pagSelectChange(e){
        limt = pagArr[this.selectedIndex]
        upnuMarea()
        selectFun && selectFun(this.selectedIndex,limt)
    }

    function upnuMarea(){
        limt = pagArr[pagSelect.selectedIndex]
        let end = offset*limt > len ? len : offset*limt
        nuMarea.innerText = (offset-1)*limt+1 +'-'+ end +"条"
    }

    upPagul(len,limt)
    function upPagul(leng=len,lim=limt){
        upnuMarea()
        pagul.innerHTML = ""
      
        if(prev){
            var liprev = createLi('«','prev')
            if(offset == 1){
                liprev.children[0].style.cursor = 'no-drop'
            }
            pagul.appendChild(liprev)
        }
       
        let omit = false
        let pages = Math.ceil(leng/lim)
        //只显示6个
        let f = pageLimt|| 7;
        let condition = ''
        for(var i = 0; i < pages; i++){

            if(f > 5){
                // 判断单前页位置
                if(offset <= 3){ // 在 0-3之间
                    condition = i < f-2 || i>= pages-1
                }else if(offset > 3 && offset < pages-1 ){ // 在 3 - pages-1之间
                    condition = i < 2 || i == offset || i == offset-2 || i == offset-1 || i>= pages-1
                }else if(offset >=  pages-1){ //在最后
                    condition = i < 2 || i == offset || i == offset-2 || i == offset-1 || i>= pages-4
                }
            }
            if(f < 5){ //简洁版
                condition = i < 1 || i == offset || i == offset-2 || i == offset-1 || i>= pages-1 || i == 0
            }
            
            // offset = 1
            // 12 ... 9
            // offset = 2
            // 123... 9
            // offset = 3
            // 1..345... 9
            // offset = 4
            // 1..456... 9
            
            
            if(condition){
                var li = createLi(i+1,i+1)
                if(i == offset-1){//单前页
                    li.classList.add("presentPage")
                }
                if(pages-1-offset >= 2 && omit){
                    omit = false
                }
                
                pagul.appendChild(li)
            }else{
                if(!omit){  // 过长处理
                    omit = true
                    var li = createLi('...','...')
                    li.classList = "omit"
                    pagul.appendChild(li)
                }
            }

            // if(i >= pages-(f/2) || i < f/2){
            //     // 判断单前页位置
            //     var li = createLi(i+1,i+1)
            //     if(i == offset-1){//单前页
            //         li.classList.add("presentPage")
            //     }
            //     pagul.appendChild(li)
            // }else{
            //     if(!omit){  // 过长处理
            //         omit = true
            //         var li = createLi('...','...')
            //         li.classList = "omit"
            //         pagul.appendChild(li)
            //     }
            // }
        }
        if(next){
            var linext = createLi('»','next')
            if(offset == pages){
                console.dir(liprev);
                linext.children[0].style.cursor = 'no-drop'
            }
            pagul.appendChild(linext)
        }
    }

    let pagulCallback = null
    // 事件处理
    pagul.addEventListener('click',function(e){
        var target = e.target
        let pages = Math.ceil(len/limt)
        var qieHuan = false
        if(target.nodeName == "A"){
            var index = target.dataset.index
            switch(index){
                case 'prev':
                    if(offset == 1) qieHuan = true
                    offset --
                    next()
                    break;
                case 'next':
                    if(offset == pages) qieHuan = true
                    offset ++
                    next()
                    break;
                case '...':
                    break;
                default:
                    offset = index
                    next()
                    break;
            }

            function next(){
                offset = offset <= 0 ? 1 :offset
                offset = offset >pages ? pages :offset
                if(!qieHuan){
                    upnuMarea() // 更新数据区域
                    upPagul(len,limt)
                    pagulCallback && pagulCallback(index,offset)
                }
            }
        }
    })

    function pageCode(fun){
        pagulCallback = fun
    }

    return{
        upPagul,
        selecthandle,
        pageCode
    }
}

css

.paging{
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
    margin-top: 15px;
}
.left_l select{
    border: 1px solid #3e8687;
    outline: none;
    border-radius:2px;
    background-color: rgba(62, 134, 135, .45);
    margin: 0 4px;
}
.pagination{
    margin:0;
}
.pagination ul{
    border-radius: 3px;
}
.pagination ul>li>a{
    padding: 4px 12px;
    line-height: 20px;
    text-decoration: none;
    background-color: rgba(62, 134, 135, .45);
    border: 1px solid rgba(62, 134, 135, .45);
    border-left-width: 0;
}
.pagination ul>li:first-child a{
    border-left-width: 1px;
}
.nums span{
    color: #FF9B42
}
.pagination ul li.presentPage a{
    background-color: rgba(62, 134, 135, .7);
}

html结构

<div class="paging">
            <div class="left flexStart">
                <div class="left_l flexStart">
                    <div>显示</div>
                    <div> 
                        <select name="" id="pagSelect">
                            <!-- <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="40">40</option> -->
                        </select>
                    </div>
                    <div>条</div>
                </div>
                <div class="nums">
                    当前显示<span class="nuMarea">1-20</span>条，共<span class="len">26</span>条
                </div>
            </div>
            <div class="right">
                <div class="pagination">
                    <ul class="flexStart pagul">
                      <!-- <li><a href="#" data-index="prev">«</a></li>
                      <li><a href="#" data-index="1">1</a></li>
                      <li><a href="#" data-index="2">2</a></li>
                      <li><a href="#" data-index="3">3</a></li>
                      <li><a href="#" data-index="6">4</a></li>
                      <li><a href="#" data-index="5">5</a></li>
                      <li><a href="#" data-index="next">»</a></li> -->
                   </ul>
                  </div>
            </div>
        </div>