纯原生js制作分页器效果

实现功能如下:

点击跳转首页和尾页(可选)

跳转到指定页面(可选)

总页数每页个数的显示(可选)

分页点击跳转(必选)


话不多说 , 直接上代码

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>封装分页器</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<div id="pagination" class="pagination">

</div>

<script src="js/index.js"></script>
<!--调用-->
<script>
    window.onload = function () {
        let myPagination = new Pagination({
            pageEl: "#pagination",
            curPage: 1, //初始页码
            pageTotal: 20, //总页数
            pageSize: 5, //可选,分页个数
            pageDataTotal: 200, //总共多少条数据
            pageAmount: 10,  //每页多少条
            showPageTotalFlag: false, //是否显示数据统计
            showSkipInputFlag: false, //是否支持跳转
            showInclusiveFlag: true, //是否显示首尾按钮
            getPage: function (page) {
                //获取当前页数
                // console.log(page);
            }
        })
    }
</script>
</body>
</html>

css

.pagination ul {
    list-style: none;
    padding-left: 0;
}

.pagination ul li {
    padding: 0 10px;
    vertical-align: top;
    display: inline-block;
    font-size: 14px;
    min-width: 36px;
    min-height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    background-color: #ffffff;
    color: #606266;
    border-radius: 6px;
    margin: 0 1px;
    border: 1px solid #ebebeb;
    height: 30px;
}

.pagination ul li:hover {
    transform: scale(1.1);
    background-color: #F4F6F8;
}

.pagination li.active {
    background: #98A6AD;
    color: white;
    cursor: not-allowed;
}

.pagination li.disabled {
    cursor: not-allowed;
}

.pagination li.totalPage {
    background: transparent;
    cursor: default;
    border: none;
    padding: 0 6px;
}

.pagination li.totalPage:hover {
    transform: none;
    background-color: #ffffff;
}

.pagination li input {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: none;
    padding: 3px 5px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 40px;
    height: 25px;
    margin: 0 6px;
}

.pagination li input:focus {
    border-color: #98A6AD;
}

.pagination {
    user-select: none;
}

.pagination ul:nth-child(2) {
    border-radius: 6px;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

重点核心JS

class Pagination {
    constructor(obj) {
        //需要构建分页器的元素(可传入选择器)
        this.pageEl = obj.pageEl;
        //分页个数(可选择 ,默认是5)
        this.pageSize = obj.pageSize || 5;
        //总页数
        this.pageTotal = obj.pageTotal;
        //分页
        this.getPage = obj.getPage;
        //当前(初始)分页(可选择,默认是1)
        this.curPage = obj.curPage || 1;
        //每页多少条
        this.pageAmount = obj.pageAmount;
        //一共多少条数据
        this.pageDataTotal = obj.pageDataTotal;
        //是否显示数据统计 (可选择, 默认为 false)
        this.showPageTotalFlag = obj.showPageTotalFlag || false;
        //是否支持跳转 (可选择, 默认为 false)
        this.showSkipInputFlag = obj.showSkipInputFlag || false;
        //是否显示跳转首页/尾部
        this.showInclusiveFlag = obj.showInclusiveFlag || false;
        //创建UI
        this.ul = document.createElement('ul');
        //初始化
        this.init();
    }

    //初始化
    init() {
        //获取元素
        let pagination = document.querySelector(this.pageEl);
        //置空里面的元素,并且添加新元素
        pagination.innerHTML = '';
        this.ul.innerHTML = '';
        pagination.appendChild(this.ul);
        // 初始化
        if (this.showInclusiveFlag) {
            this.firstPage();
        }
        this.prePage();
        let self = this;
        // console.log(this);
        this.getPages().forEach(function (item) {
            let li = document.createElement("li");
            //判断是否是当前页
            if (item === self.curPage) {
                li.className = "active";
            } else {

                li.onclick = function () {
                    self.curPage = parseInt(this.innerHTML);
                    self.init();
                    self.getPage(self.getPage);
                }
            }
            li.innerHTML = item;
            self.ul.appendChild(li);
        });
        this.nextPage();
        if (this.showInclusiveFlag) {
            this.finalPage();
        }
        //判断是否需要开启跳转
        if (this.showSkipInputFlag) {
            this.showSkipInput();
        }
        //判断是否需要开启总页数
        if (this.showPageTotalFlag) {
            this.showPageTotal();
        }
    }

    // 首页
    firstPage() {
        let li = document.createElement("li");
        li.innerHTML = "首页";
        this.ul.appendChild(li);
        li.onclick = () => {
            this.curPage = 1;
            this.init();
            this.getPage(this.getPage);
        }
    }

    // 上一页
    prePage() {
        let li = document.createElement("li");
        li.innerHTML = "<";
        if (parseInt(this.curPage) > 1) {
            li.onclick = () => {
                this.curPage = parseInt(this.curPage) - 1;
                this.init();
                this.getPage(this.curPage)
            };
        } else {
            li.className = "disabled";
        }
        this.ul.appendChild(li);
    }

    // 分页
    getPages() {
        //创建数组保存分页
        let pag = [];
        //如果当前页小于总页数
        if (this.curPage <= this.pageTotal) {
            //如果当前页小于分页数
            if (this.curPage < this.pageSize) {
                //当页码数小于显示的条目数
                //取出最小的值
                let i = Math.min(this.pageSize, this.pageTotal);
                //插入元素
                while (i) {
                    pag.unshift(i--);
                }
            } else {
                //当前页数大于显示条数
                // 当前页码 - 分页个数 / 2
                let middle = this.curPage - Math.floor(this.pageSize / 2);
                let i = this.pageSize;
                //middle  > 页码总数 - 显示页码
                if (middle > this.pageTotal - this.pageSize) {
                    middle = this.pageTotal - this.pageSize + 1;
                }
                //插入元素
                while (i--) {
                    pag.push(middle++);
                }
            }
        } else {
            console.error('当前页数不能大于总页数');
        }
        if (!this.pageSize) {
            console.error('显示页数不能为空或者0');
        }
        // console.log(pag);
        return pag;

    }

    // 下一页
    nextPage() {
        let li = document.createElement('li');
        li.innerHTML = ">";
        //判断当前页是否小于总页数
        if (parseInt(this.curPage) < parseInt(this.pageTotal)) {
            li.onclick = () => {
                this.curPage = parseInt(this.curPage) + 1;
                this.init();
                this.getPage(this.getPage);
            }
        } else {
            li.className = "disabled";
        }
        this.ul.appendChild(li);
    }


    // 尾页
    finalPage() {
        let li = document.createElement("li");
        li.innerHTML = "尾页";
        this.ul.appendChild(li);
        li.onclick = () => {
            this.curPage = parseInt(this.pageTotal);
            this.init();
            this.getPage(this.getPage);
        }
    }

    //是否支持跳转
    showSkipInput() {
        let li = document.createElement("li");
        li.className = "totalPage";
        let span1 = document.createElement('span');
        span1.innerHTML = '跳转到';
        li.appendChild(span1);
        let input = document.createElement('input');
        input.setAttribute("type", "number");
        input.onkeydown = (event) => {
            let Event = event || window.event;
            //按下回车
            if (Event.keyCode == "13") {
                let value = parseInt(Event.target.value);
                //判断是否是数值, 并且是否小于总页数
                if (typeof value === 'number' && value <= this.pageTotal) {
                    this.curPage = value;
                    this.getPage(this.curPage);
                } else {
                    alert("跳转页数不能大于总页数! ");
                }
                this.init();
            }
        };
        li.appendChild(input);
        let span2 = document.createElement('span');
        span2.innerHTML = "页";
        li.appendChild(span2);
        this.ul.appendChild(li);
    }

    //是否显示总页数,每页个数,数据
    showPageTotal() {
        let li = document.createElement('li');
        li.innerHTML = `共&nbsp${this.pageTotal}&nbsp页`;
        li.className = 'totalPage';
        this.ul.appendChild(li);
        let li2 = document.createElement('li');
        li2.innerHTML = `每页&nbsp${this.pageAmount}&nbsp条`;
        li.className = 'totalPage';
        this.ul.appendChild(li2);
        let li3 = document.createElement('li');
        li3.innerHTML = `合计&nbsp${this.pageDataTotal}&nbsp条数据`;
        li.className = 'totalPage';
        this.ul.appendChild(li3);
    }
}

预览地址:分页器


该分页器很大一部分是源自于 站长素材 的代码 ,而他的实现方式是利用ES5的构造函数做的, 而我的这份是我自已用es6的class重新构造了一起, 并且添加了一些新功能.并且添加了大量的注释 emmmmm ~~

该分页器主要的功能还是在于 getPages 里面, 如果你是想参考分页器的思路的话 , 最基本的功能就在这个里面了.(判断页码点击,判断页码生成 )