分页小demo

//2017-11-20

基于jquery的分页小demo

function Pagination(options){
    var opts = $.extend({
        node : null,
        display : 5,
        isNeedQuick : true,
        isNeedInput : true,
        callback : null
    },options);
    //容器
    this.node = opts.node;
    this.display = opts.display;
    this.isNeedQuick = opts.isNeedQuick;
    this.isNeedInput = opts.isNeedInput;
    this.callback = opts.callback;
    this.state = {
        cur : -1,
        total : -1
    };
    //标注是否初始化创建
    this.initCreate = true;
};
Pagination.prototype = {
    constructor : Pagination,
    trigger : function(cur,total){
        var _this = this;
        if(!_this.node || !_this.node.length){return}
        _this.setState(cur,total);
    },
    //设置state
    setState : function(){
        var _this = this;
        var args = [].slice.call(arguments);
        var status = false;
        if(typeof args[0] == 'number' && args[0] >= 1 && _this.state.cur != args[0]){
           _this.state.cur = args[0];
           status = true;
        }
        if(typeof args[1] == 'number' && args[1] >= 1 && _this.state.total != args[1]){
            _this.state.total = args[1];
            status = true;
        }
        if(status){
            if(_this.initCreate){
                _this.handleCreate();
            }else{
                _this.createPage();
            } 
        }
    },
    //创建页码
    handleCreate : function(){
        var _this = this;
        if(_this.state.total < 0){return}
        _this.pageBox = $("<div class='vo_pagination clearfix'>");
        //创建页码
        _this.createPage();
        //快捷按钮
        _this.createQuick();
        //创建输入
        _this.createInput();
        //插入
        _this.node.html(_this.pageBox);
        //绑定事件
        _this.bindEve();
        //关闭初始化状态
        _this.initCreate = false;
    },
    //创建快捷按钮
    createQuick : function(){
        var _this = this;
        if(!_this.isNeedQuick){return}
        var firstBtn = $("<a class='first-btn' data-quick='first' href='javascript:;'>首页</a>"),
            prevBtn = $("<a class='prev-btn' data-quick='prev' href='javascript:;'>上一页</a>"),
            nextBtn = $("<a class='next-btn' data-quick='next' href='javascript:;'>下一页</a>"),
            lastBtn = $("<a class='last-btn' data-quick='last' href='javascript:;'>末页</a>");
        //插入
        _this.pageBox.prepend(prevBtn).prepend(firstBtn).append(nextBtn).append(lastBtn);

    },
    //创建页码
    createPage:function(){
        var _this = this;
        if(!_this.pageGroup){
            _this.pageGroup = $("<div class='page-group'></div>");
            _this.pageBox.html(_this.pageGroup);
        }
        var group = [];
        var len = _this.state.total > _this.display ? _this.display : _this.state.total;
        var start = _this.getStartPage();
        for(var i = 0; i < len; i++){
            var page = start + i;
            var className = page == _this.state.cur ? 'page-btn on' : 'page-btn';
            group.push("<a href='javascript:;' class='" + className + "' data-page='" + page + "'>" + page + "</a>");
        }
        //插入
        _this.pageGroup.html(group.join(''));
        //省略号
        if(start + i <= _this.state.total){
            _this.pageGroup.append("<span class='ellipsis'>...</span>");
        }else if(start > 1){
            _this.pageGroup.prepend("<span class='ellipsis'>...</span>");
        }

    },
    //获取开始页码
    getStartPage:function(){
        var _this = this;
        var start = 1;
        if(_this.display >= _this.state.total){
            return start;
        }
        var half = Math.floor(_this.display/2);
        start = _this.state.cur > half ? _this.state.cur - half : start;
        start = _this.state.cur + half >= _this.state.total ? _this.state.total - _this.display + 1 : start;
        return start;
    },
    //创建输入
    createInput:function(){
        var _this = this;
        if(!_this.isNeedInput){return}
        if(!_this.inputGroup){
            _this.inputGroup = $("<div class='input-group clearfix'></div>");
            _this.pageBox.append(_this.inputGroup);
        }
        var group = ["<span>第</span>"];
        group.push("<input type='text' data-node='text'/>");
        group.push("<span>页</span>");
        group.push("<a href='javascript:;' data-node='submit' class='submit-btn'>GO</a>");
        _this.inputGroup.html(group.join(''));
        //设置节点
        _this.inputText = _this.inputGroup.find("[data-node='text']");
        _this.inputBtn = _this.inputGroup.find("[data-node='submit']");
    },
    //用户操作
    handleUserAction : function(page){
        var _this = this;
        _this.setState(page);
        //回调
        if(typeof _this.callback == 'function'){
            _this.callback.call(_this,_this.state.cur);
        }
    },
    //快捷按钮
    handleQuick : function(){
        var _this = this;
        return function(){
            var quick = $(this).attr('data-quick');
            var cur = _this.state.cur,
                total = _this.state.total;
            var page = -1;
            switch(quick){
                case 'first':
                    page = cur == 1 ? page : 1;
                    break;
                case 'prev':
                    page = (cur - 1 >= 1) ? cur - 1 : page;
                    break;
                case 'next':
                    page = (cur + 1 > total) ? page : cur + 1;
                    break;
                case 'last':
                    page = cur == total ? page : total;
                    break;
            }
            if(page > -1){
                _this.handleUserAction(page);
            }
        }
    },
    //页码
    handlePage : function(){
        var _this = this;
        return function(){
            var page = parseInt($(this).attr('data-page'));
            if(page == _this.state.cur){ return false}
            _this.handleUserAction(page);
            return false;
        }
    },
    //检测输入值
    testInputPage : function(page){
        var _this = this;
        if(page == '' || isNaN(page)){
            alert('输入页码必须为数字!');
            return -1;
        }
        page = parseInt(page);
        if(page < 1 || page > _this.state.total){
            alert('输入页码不合法！')
            return -1;
        }
        return page;
    }, 
    //提交
    handleSubmit : function(){
        var _this = this;
        var page = _this.testInputPage(_this.inputText.val().trim());
        if(page < 0 || page == _this.state.cur){ 
            _this.inputText.val('');
            return;
        }
        _this.inputText.trigger('blur');
        _this.handleUserAction(page);
    },
    //绑定事件
    bindEve : function(){
        var _this = this;
        //页码点击
        _this.pageBox.on('click','[data-page]',_this.handlePage());
        //快捷按钮绑定事件
        if(_this.isNeedQuick){
            _this.pageBox.find('[data-quick]').on('click',_this.handleQuick());
        }
        //输入事件
        if(_this.isNeedInput){
            //输入快捷键
            _this.inputText.on('keyup',function(e){
                var e = e || window.event;
                if(e.keyCode == 13){
                    _this.handleSubmit();
                    return false;
                }
            });
            //输入按钮
            _this.inputBtn.on('click',function(){
                _this.handleSubmit();
                return false;
            });
        }
    }
};

sCss:

.vo_pagination{
    color: #cfcfcf;
    $height:24px;
    a{
        color: #cfcfcf;
        border-radius: 4px;
        &:hover{
            color: #67b7f0;
        }
    }
    .first-btn,
    .prev-btn,
    .next-btn,
    .last-btn,
    .page-btn,
    .submit-btn{
        $btnHeight:$height - 2;
        float: left;
        height: $btnHeight;
        line-height: $btnHeight;
        padding: 0 8px;
        border: 1px solid #b0b0b0;
        margin: 0 10px 0 0;
        
    }
    .page-group{
        float: left;
        height: $height;
        .page-btn{
            &.on{
                color: #67b7f0;
            }
        }
        .ellipsis{
            float: left;
            line-height: $height;
            margin: 0 10px 0 0;
        }
    }
    .input-group{
        float: left;
        height: $height;
        line-height: $height;
        span{
            float: left;
            margin: 0 10px 0 0;
        }
        input{
            float: left;
            margin: 0 10px 0 0;
            width: 60px;
            text-align: center;
            border: 0;
            border-bottom:1px solid #b0b0b0;
        }
        .submit-btn{
            margin: 0;
        }
    }
}

使用：

<div data-node="pagination"></div>
var pagination = new Virgo.pagination({
        node : $("[data-node='pagination']"),
        callback : function(cur){
            console.log(cur);
        }
    });
    pagination.trigger(1,10);