pagination实现分页功能

pagination.js:

/**
 * pagination分页插件
 */
;(function($,window,document,undefined){

    //配置参数
    var defaults = {
        totalData:0,            //数据总条数
        showData:0,                //每页显示的条数
        pageCount:9,            //总页数,默认为9
        current:1,                //当前第几页
        prevCls:'prev',            //上一页class
        nextCls:'next',            //下一页class
        prevContent:'<',        //上一页内容
        nextContent:'>',        //下一页内容
        activeCls:'active',        //当前页选中状态
        coping:false,            //首页和尾页
        homePage:'',            //首页节点内容
        endPage:'',                //尾页节点内容
        count:3,                //当前页前后分页个数
        jump:false,                //跳转到指定页数
        jumpIptCls:'jump-ipt',    //文本框内容
        jumpBtnCls:'jump-btn',    //跳转按钮
        jumpBtn:'跳转',            //跳转按钮文本
        callback:function(){}    //回调
    };

    var Pagination = function(element,options){
        //全局变量
        var opts = options,//配置
            current,//当前页
            $document = $(document),
            $obj = $(element);//容器

        /**
         * 设置总页数
         * @param int page 页码
         * @return opts.pageCount 总页数配置
         */
        this.setTotalPage = function(page){
            return opts.pageCount = page;
        };

        /**
         * 获取总页数
         * @return int p 总页数
         */
        this.getTotalPage = function(){
            var p = opts.totalData || opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
            return p;
        };

        //获取当前页
        this.getCurrent = function(){
            return current;
        };

        /**
         * 填充数据
         * @param int index 页码
         */
        this.filling = function(index){
            var html = '';
            current = index || opts.current;//当前页码
            var pageCount = this.getTotalPage();
            if(current > 1){//上一页
                html += '<a href="javascript:;" class="'+opts.prevCls+'">'+opts.prevContent+'</a>';
            }else{
                $obj.find('.'+opts.prevCls) && $obj.find('.'+opts.prevCls).remove();
            }
            if(current >= opts.count * 2 && current != 1 && pageCount != opts.count){
                var home = opts.coping && opts.homePage ? opts.homePage : '1';
                html += opts.coping ? '<a href="javascript:;" data-page="1">'+home+'</a><span>...</span>' : '';
            }
            var start = current - opts.count,
                end = current + opts.count;
            ((start > 1 && current < opts.count) || current == 1) && end++;
            (current > pageCount - opts.count && current >= pageCount) && start++;
            for (;start <= end; start++) {
                if(start <= pageCount && start >= 1){
                    if(start != current){
                        html += '<a href="javascript:;" data-page="'+start+'">'+ start +'</a>';
                    }else{
                        html += '<span class="'+opts.activeCls+'">'+ start +'</span>';
                    }
                }
            }
            if(current + opts.count < pageCount && current >= 1 && pageCount > opts.count){
                var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
                html += opts.coping ? '<span>...</span><a href="javascript:;" data-page="'+pageCount+'">'+end+'</a>' : '';
            }
            if(current < pageCount){//下一页
                html += '<a href="javascript:;" class="'+opts.nextCls+'">'+opts.nextContent+'</a>'
            }else{
                $obj.find('.'+opts.nextCls) && $obj.find('.'+opts.nextCls).remove();
            }

            html += opts.jump ? '<input type="text" class="'+opts.jumpIptCls+'"><a href="javascript:;" class="'+opts.jumpBtnCls+'">'+opts.jumpBtn+'</a>' : '';

            $obj.empty().html(html);
        };

        //绑定事件
        this.eventBind = function(){
            var self = this;
            var pageCount = this.getTotalPage();//总页数
            $obj.off().on('click','a',function(){
                if($(this).hasClass(opts.nextCls)){
                    var index = parseInt($obj.find('.'+opts.activeCls).text()) + 1;
                }else if($(this).hasClass(opts.prevCls)){
                    var index = parseInt($obj.find('.'+opts.activeCls).text()) - 1;
                }else if($(this).hasClass(opts.jumpBtnCls)){
                    if($obj.find('.'+opts.jumpIptCls).val() !== ''){
                        var index = parseInt($obj.find('.'+opts.jumpIptCls).val());
                    }else{
                        return;
                    }
                }else{
                    var index = parseInt($(this).data('page'));
                }
                self.filling(index);
                typeof opts.callback === 'function' && opts.callback(self);
            });
            //输入跳转的页码
            $obj.on('input propertychange','.'+opts.jumpIptCls,function(){
                var $this = $(this);
                var val = $this.val();
                var reg = /[^d]/g;
                if (reg.test(val)) {
                    $this.val(val.replace(reg, ''));
                }
                (parseInt(val) > pageCount) && $this.val(pageCount);
                if(parseInt(val) === 0){//最小值为1
                    $this.val(1);
                }
            });
            //回车跳转指定页码
            $document.keydown(function(e){
                var self = this;
                if(e.keyCode == 13 && $obj.find('.'+opts.jumpIptCls).val()){
                    var index = parseInt($obj.find('.'+opts.jumpIptCls).val());
                    self.filling(index);
                    typeof opts.callback === 'function' && opts.callback(self);
                }
            });
        };

        //初始化
        this.init = function(){
            this.filling(opts.current);
            this.eventBind();
        };
        this.init();
    };

    $.fn.pagination = function(parameter,callback){
        if(typeof parameter == 'function'){//重载
            callback = parameter;
            parameter = {};
        }else{
            parameter = parameter || {};
            callback = callback || function(){};
        }
        var options = $.extend({},defaults,parameter);
        return this.each(function(){
            var pagination = new Pagination(this, options);
            callback(pagination);
        });
    };

})(jQuery,window,document);

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/pagination.css">
    <script src="../../base/jquery.js"></script>
    <script src="js/jquery.pagination.js"></script>
</head>
<body>
<div class="box">

</div>
<div class="M-box"></div>
<script src="main.js"></script>
</body>
</html>

pagination.css

@charset "UTF-8";

/*.wrapper{*/
    /*margin:0 auto;*/
    /*960px;*/
    /*height:100%;*/
/*}*/
.M-box{
    position: relative;
    text-align: center;
      zoom: 1;
}
.M-box:before,.M-box:after{
    content:"";
    display:table;
}
.M-box:after{
    clear:both;
    overflow:hidden;
}
.M-box span{
    float: left;
    margin:0 5px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    color: #bdbdbd;
    font-size: 14px;
}
.M-box .active{
    float: left;
    margin:0 5px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: #e91e63;
    color: #fff;
    font-size: 14px;
    border: 1px solid #e91e63;
}
.M-box a{
    float: left;
    margin:0 5px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: #fff;
    border: 1px solid #ebebeb;
    color: #bdbdbd;
    font-size: 14px;
}
.M-box a:hover{
    color:#fff;
    background: #e91e63;
}
.M-box .next,.M-box .prev{
    font-family: "Simsun";
    font-size: 16px;
    font-weight: bold;
}
.now,.count{
    padding:0 5px;
    color:#f00;
}

input{
    float: left;
    margin:0 5px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #fff;
    border: 1px solid #ebebeb;
    outline: none;
    color: #bdbdbd;
    font-size: 14px;
}

package.json:

{
  "items": [
    {
      "name": "a",
      "age": 12
    },
    {
      "name": "b",
      "age": 13
    },
    {
      "name": "c",
      "age": 11
    },
    {
      "name": "d",
      "age": 12
    },
    {
      "name": "e",
      "age": 12
    }
  ]
}

main.js

/**
 * Created by mengfanxu on 17/2/3.
 */
$(function () {

    var showBox = $('.box');

    $.getJSON('data/package.json', function (data) {
        console.log(data.items.length);
        var item = data.items,length = data.items.length, pageIndex ;
        //默认页面显示内容
        showBox.html('姓名：'+item[0]['name']+'
'+'年龄：'+item[0]['age']);
        $(".M-box").pagination({
            pageCount: length,
            jump: true,
            coping: true,
            homePage: '首页',
            endPage: '末页',
            preContent: '上页',
            nextContent: '下页',
            callback: function (index) {
                pageIndex = index.getCurrent()-1;
                showBox.html('姓名：'+item[pageIndex]['name']+'
'+'年龄：'+item[pageIndex]['age']);
            }
        })
    });


});

喝水不忘造井之恩，插件作者：Mss: http://www.jq22.com/jquery-info5697