自定义分页功能（自定义函数做参数，自动调用自定义函数,改变页码等数据）

今天写一个需求的时候，需要用到分页，然后没有找到合适的就自己写了一个，记录一下，可以直接对接后端接口。不管是element-ui还是bootstrap等等框架都可以使用，只需要传入你的自定义函数和你的数据总数就可以了，也可以自己定义html样式，这部分主要是js代码。

这个是实现效果：

html

<div class="custom-page">
    <ul class="pagination custom-page-ul">
        <li class="page-item"><a class="page-details" href="#">共100条</a></li>
        <li class="page-item"><a class="page-details" href="#">共10页</a></li>
        <li class="page-item"><a class="page-link custom-page-a previous" href="#">上一页</a></li>
        <li class="page-item"><a class="page-link custom-page-a page-head page-active" href="#">1</a></li>
        <li class="page-item"><a class="page-link custom-page-a" href="#">2</a></li>
        <li class="page-item"><a class="page-link custom-page-a page-tail" href="#">3</a></li>
        <li class="page-item"><a class="page-link custom-page-a next" href="#">下一页</a></li>
        <li class="page-item"><a class="page-details" href="#">共10页</a></li>
    </ul>
</div>

注意：html通过class来区分
上下一页(previous、next)，
极限页码(page-head、page-head)，
分页相关需要绑定事件的标签(custom-page-a),
选择分页相关类名page-link
css

.page-active{
     background: #409eff !important;
}

css没什么代码，可以自己自定义很简单的

js

<script>

    window.onload = function(){
        initPage(testAjax,10)
    }


       /**
     * 绑定点击事件
     * @param method 调用的方法 需要返回一个total：数据总数
     * @param pageSize 页码
     */
    function initPage(method,pageSize){
        //默认页码
        let nowPage = 1;
        //调用方法
        let total = initPageFirst(method,pageSize);
        let totalPage = initPageNum(pageSize,total);
        document.getElementsByClassName("page-details")[0].text = "共"+total+"条";
        let aEles = document.getElementsByClassName("custom-page-a");
        for(let i=0; i<aEles.length; i++){
            aEles[i].addEventListener("click",function(ele){
                let pageFlag = nowPage;
                switch(ele.target.text){
                    case '上一页' :
                        if(parseInt(nowPage)-1>0){
                            nowPage--;
                        };
                        break;
                    case '下一页' :
                        if(parseInt(nowPage)+1<=totalPage){
                            nowPage++;

                        };
                        break;
                    default:
                        nowPage = ele.target.text;
                }
                if(pageFlag!=nowPage){
                    result = method.call(null,nowPage,pageSize);
                    total = result.total;
                    totalPage = initPageNum(pageSize,total);
                    document.getElementsByClassName("page-details")[0].text = "共"+total+"条";
                }
                renderPage(nowPage,aEles);
            })
        }
    }

    /**
     * 初始化页码数据
     * @param method 自定义请求数据方法 需要返回一个total：数据总数
     * @param pageSize 页大小
     */
    function initPageFirst(method,pageSize){
        //默认页码
        let nowPage = 1;
        //调用方法
        let result = method.call(null,nowPage,pageSize);
        let total = result.total;
        initPageNum(pageSize,total);
        document.getElementsByClassName("page-details")[0].text = "共"+total+"条";
        let aEles = document.getElementsByClassName("custom-page-a");
        renderPage(nowPage,aEles);
        return total;
    }
    /**
     *  查看当前响应元素是否是数字
     */
    function isNum(ele){
        if(ele.className.indexOf('previous')!=-1 || ele.className.indexOf('next')!=-1){
            return false;
        }
        return true;
    }

    /**
     * 获取总页码
     */
    function initPageNum(pageSize,totalPage){
        let page = Math.ceil(totalPage/pageSize);
        document.getElementsByClassName("page-details")[1].text = pageSize + "条/页";
        document.getElementsByClassName("page-details")[2].text = "共"+page+"页";
        return page;
    }

    /**
     * 渲染active样式
     */
    function renderPage(nowPage,aEles){
        let i=0;
        let flag = false;
        while(aEles[i].className.indexOf('next')==-1){
            if(isNum(aEles[i])){
                if(aEles[i].text == nowPage){
                    aEles[i].className += " page-active";
                    flag = true;
                }else{
                    if(aEles[i].className.indexOf(" page-active")){
                        aEles[i].className = aEles[i].className.replaceAll(" page-active","")
                    }
                }
            }
            i++
        }
        if(!flag){
            if(nowPage < aEles[1].text){
                for(let i=1; i<aEles.length-1; i++){
                    if(isNum(aEles[i])){
                        aEles[i].text = nowPage+i-1;
                    }
                }
                document.getElementsByClassName("page-head")[0].className += " page-active";
            }else{
                for(let i=aEles.length-2; i>0; i--){
                    if(isNum(aEles[i])){
                        aEles[i].text = nowPage-(3-i);
                    }
                }
                document.getElementsByClassName("page-tail")[0].className += " page-active";
            }
        }
    }

    /**
     *
     * @param pageNum
     * @param pageSize
     * @returns {total: number}
     */
    function testAjax(pageNum,pageSize){
        return {total:56};
    }
</script>

注意
js需要注意的地方就是，自定义的返回数据的方法对象里，需要有一个total的属性，用来存放总数。testAjax就是自定义的函数，是你自己的请求后端的函数，然后initPage这个函数会调用的你的自定义函数，并且去渲染分页样式。