jQuery自定义分页

Html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jQuery自定义分页</title>

    <link type="text/css" href="css/page.css" rel="stylesheet" />

    <script type="text/javascript" src="js/jquery.min.js"></script>

</head>

<body>

    <div class="page" id="Page"></div>


    <script type="text/javascript" src="js/page.js"></script>
    <script type="text/javascript">
        P.initMathod({
            params: {
                elemId: '#Page',
                total: '100',
                pageSize: '10'
            },
            requestFunction: function() {
                // P.config.total = parseInt(Math.random() * 10 + 85);//此处模拟总记录变化

                //TODO ajax异步请求过程,异步获取到的数据总条数赋值给 P.config.total

                //列表渲染自行处理

                console.log(JSON.stringify(P.config));
            }
        });
    </script>

</body>

</html>

Js:

/**
 * 自定义分页（封装实现）
 * @type {Page}
 */

P = new Page();
//分页对象
function Page(){
    this.config = {elemId:'#page',pageIndex:'1',total:'0',pageNum:'7',pageSize:'10'};//默认参数
    this.version = '1.0';//分页版本
    this.requestFunction = null;//分页版本

    //初始化参数
    this.initMathod = function(obj){
        $.extend(this.config,obj.params);//默认参数 + 用户自定义参数
        this.requestFunction = obj.requestFunction;
        this.renderPage();
    };

    //渲染分页
    this.renderPage = function(){
        this.requestFunction();
        this.pageHtml();

        //分页绑定事件
        $(P.config.elemId).on('click','a',function(){
            var flag = $(this).parent().hasClass('disabled');
            if(flag){
                return false;
            }

            var pageIndex = $(this).data('pageindex');
            P.config.pageIndex = pageIndex;
            P.requestFunction();
            P.pageHtml();
        });
    };

    //分页合成
    this.pageHtml = function(){
        var data = this.config;
        if(parseInt(data.total) <= 0){
            return false;
        }

        var elemId = data.elemId;
        var pageNum = isBlank(data.pageNum) ? 7 : parseInt(data.pageNum);//可显示页码个数
        var pageSize = isBlank(data.pageSize) ? 10 : parseInt(data.pageSize);//可显示页码个数
        var total = parseInt(data.total);//总记录数
        var pageTotal = total%pageSize != 0 ? parseInt(total/pageSize) + 1 : parseInt(total/pageSize);//总页数
        var pageIndex = pageTotal < parseInt(data.pageIndex) ? pageTotal : parseInt(data.pageIndex);//当前页
        var j = pageTotal < pageNum ? pageTotal : pageNum;//如果总页数小于可见页码，则显示页码为总页数
        var k = pageIndex < parseInt((j/2) + 1) ? -1 * (pageIndex - 1) : pageIndex > (pageTotal - parseInt(j/2)) ? -1 * (j - (pageTotal - pageIndex) - 1) : -1 * parseInt((j/2));//遍历初始值
        var pageHtml = '';

        if(pageIndex <= 0 || pageIndex == 1){
            pageHtml += '首页' +
                '上一页';
        }else{
            pageHtml += '首页' +
                '上一页';
        }

        for(var i = k;i < (k + j);i++){
            if(pageTotal == (pageIndex + i - 1))break;
            if(i == 0){
                pageHtml += ''+ pageIndex +'';
            }else{
                pageHtml += ''+ (pageIndex + i) +'';
            }
        }

        if(pageTotal == 1 ||  pageTotal <= pageIndex){
            pageHtml += '下一页' +
                '末页';
        }else{
            pageHtml += '下一页' +
                '末页';
        }
        pageHtml += ''
        $(elemId).html('');
        $(elemId).html(pageHtml);
    };
}

function isBlank(str){
    if(str == undefined || str == null || str.trim() == ''){
        return true;
    }
    return false;
}

Css:

#Page {
    margin: 0px auto 30px;
    width: 430px;
}

#Page ul {
    padding: 0;
    min-width: 450px;
}

#Page ul::after {
    content: '';
    display: block;
    clear: both;
}

#Page ul li {
    float: left;
    width: auto;
    min-width: 32px;
    height: 30px;
    line-height: 30px;
    list-style: none;
}

#Page a {
    color: #aaa;
    font-family: "微软雅黑";
    padding: 0 10px;
    text-decoration: none;
    display: block;
    text-align: center;
    border: 1px solid #ccc;
    border-left: none;
}

#Page ul li:first-child a {
    border-left: 1px solid #ccc;
}

#Page ul li a:hover {
    background-color: #9f1f1c;
}

#Page ul li a:hover {
    color: white;
}

#Page .disabled a:hover {
    background-color: white;
    cursor: not-allowed;
    color: #aaa;
}

#Page .active a {
    background-color: #9f1f1c;
    color: white;
}