自定义功能件--分页

这个介绍的是项目中自己封装的一个分页的方法，用的技术也是构造函数。虽然有很多的分页插件，但是自己也是可以动手写一下的。好了，上代码。

分页的构造函数代码common.js

/**
 * 分页的构造函数
 * @param { id:"容器id", pageSize:"每页的数据条数", totalCount:"总数", pageNum:"当前页数", clickChange:"点击切换事件", sizeSelect:"分页条数的数据" }
 */
function Pagination(o){
    if(!o.id){
        throw '分页容器id没有给定';
    }
    this.id = o.id;
    this.box = document.getElementById(o.id);
    this.pageSize = o.pageSize || 10;
    this.totalCount = o.totalCount || 0;
    this.pageNum = o.pageNum || 0;
    if(typeof o.sizeSelect != "undefined" && !o.sizeSelect instanceof Array){
		throw '分页数据不正确';
	}
	this.sizeSelect = o.sizeSelect || null;
    this.clickChange = o.clickChange;
    this.sizeChange = o.sizeChange;
    this.init();
}

Pagination.prototype.init = function(){
    this.setPage();
}

Pagination.prototype.reset = function(option){
    if(option.pageNum){
        this.pageNum = parseInt(option.pageNum);
    }
    if(option.pageSize){
        this.pageSize = parseInt(option.pageSize);
    }
    if(option.totalCount){
        this.totalCount = option.totalCount;
    }
    this.setPage();
}

Pagination.prototype.setPage = function(){
    // console.log(this);
    var that = this;
    var pageSize = this.pageSize;
    var pageNum = this.pageNum;
    var totalCount = this.totalCount;
    var totalPage = Math.ceil(totalCount / pageSize);
    totalPage = totalPage == "0" ? "1" : totalPage;
    var str = '<div class="pagination-box"><span class="pageInfo">第'+ (pageNum + 1) +'页|共'+ totalPage +'页|共'+ totalCount +'条</span>'
	if(this.sizeSelect){
		str += '<select class="pageSelect">'
		this.sizeSelect.forEach(function(item){
			str += '<option value="'+ item +'" '+ (item == that.pageSize ? "selected" : "") +'>'+ item +'条/页</option>';
		})
		str += '</select>';
	}
    str += '<span class="page prev '+ (pageNum > 0 ? "" : "disabled" ) +'">前一页</span>';
    if(totalPage <= 10){
        for(var i = 0;i < totalPage;i++){
            str += '<span class="page '+ (pageNum == i ? "current" : "") +'">'+ (i + 1) +'</span>';
        }
    }else{
        if(pageNum < 4){
            var endNum = pageNum + 3 <= 5 ? 5 : pageNum + 3; 
            for(var i = 0;i < endNum;i++){
                str += '<span class="page '+ (pageNum == i ? "current" : "") +'">'+ (i + 1) +'</span>';
            }
            str += '<span class="more">...</span>';
            str += '<span class="page">'+ totalPage +'</span>';
        }else if(pageNum > totalPage - 5){
            var startNum = pageNum - 1 > totalPage - 5 ? totalPage - 4 : pageNum - 1;
            str += '<span class="page">1</span><span class="more">...</span>';
            for(var i = startNum - 1;i < totalPage;i++){
                str += '<span class="page '+ (pageNum == i ? "current" : "") +'">'+ (i + 1) +'</span>';
            }
        }else{
            str += '<span class="page">1</span><span class="more">...</span>';
            for(var i = pageNum - 2;i <= pageNum + 2;i++){
                str += '<span class="page '+ (pageNum == i ? "current" : "") +'">'+ (i + 1) +'</span>';
            }
            str += '<span class="more">...</span>';
            str += '<span class="page">'+ totalPage +'</span>';
        }
    }
    str += '<span class="page next '+ (pageNum < totalPage - 1 ? "" : "disabled" ) +'">后一页</span></div>';
    this.box.innerHTML = str;

    var pages = this.box.getElementsByClassName('page');
    for(var i = 0;i < pages.length;i++){
        pages[i].addEventListener('click', function(e){
            var _this = e.target;
            var tagClass = _this.className;
            console.log(tagClass);
            var type = "", nextNum;
            if(/prev/.test(tagClass)){
                type = 'prev';
                nextNum = pageNum - 1;
            }else if(/next/.test(tagClass)){
                type = 'next';
                nextNum = pageNum + 1;
            }else if(/current/.test(tagClass)){
                type = 'current';
                nextNum = pageNum;
            }else{
                type = 'page';
                nextNum = parseInt(_this.innerText) - 1;
            }
            console.log(type, nextNum);
            if(nextNum < 0 || nextNum > totalPage - 1 || nextNum == pageNum){
                return;
            }
            that.reset({pageNum:nextNum+''});
            if(that.clickChange){
                that.clickChange(nextNum, that.pageSize);
            }
        })
    }
    if(this.box.getElementsByClassName("pageSelect").length > 0){
		this.box.getElementsByClassName("pageSelect")[0].addEventListener('change', function(e){
			var _this = e.target;
			var value = _this.value;
			if(that.sizeChange){
				that.sizeChange(that.pageNum, value);
			}
		})
	}
}

下面是分页用到的样式common.css

.pagination-box{
    float: right;
    height: 40px;
    font-size: 12px;
    line-height: 30px;
    padding: 5px 0;
    color: #666666;
}
.pagination-box .pageInfo{
    font-size: 12px;
}
.pagination-box .pageSelect{
    width: 80px;
    height: 30px;
    box-sizing: border-box;
    margin-left: 5px;
}
.pagination-box .more{
    padding: 0 5px;
}
.pagination-box .page{
    box-sizing: border-box;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #D9D9D9;
    background-color: #ffffff;
    margin-left: 5px;
}
.pagination-box .page:hover{
    border-color: #3bb4f2;
    color: #3bb4f2;
}
.pagination-box .page.prev ,
.pagination-box .page.next {
    width: auto;
    padding: 0 10px;
    cursor: pointer;
    user-select: none;
}
.pagination-box .page.prev.disabled:hover,
.pagination-box .page.next.disabled:hover {
    cursor: not-allowed;
    border-color: #D9D9D9;
}
.pagination-box .page.current{
    border-color: #108EE9;
    color: #ffffff;
    background-color: #108EE9;
}

下面是一个小栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="parts/common.css">
    <link rel="stylesheet" href="common.css">
    <title>分页</title>
</head>
<body>
    <div id="myPage"></div>
</body>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
    var pagination1 = new Pagination({
        id:"myPage",
        pageSize:10,
        totalCount:129,
        pageNum:0,
        sizeSelect:[10,20,30,40,50],
        clickChange:function(pageNum, pageSize){
            console.log(pageNum, pageSize);
            /**
             * 为了ajax请求数据
             */
            pagination1.reset({
                pageNum:pageNum +'',
                totalCount:150,
                pageSize:pageSize
            });
        },
        sizeChange:function(pageNum, pageSize){
            console.log(pageNum, pageSize);
            pagination1.reset({
                pageNum:pageNum +'',
                totalCount:150,
                pageSize:pageSize
            });
        }
    })
</script>
</html>

该分页可以用于前端分页也可以用于后端分页，有点击页数的回调函数和切换每页条数的回调函数，这方便了点击或者切换之后的操作。详细的属性见最上面的分页构造注释。