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:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="css/pagination.css">
 7     <script src="../../base/jquery.js"></script>
 8     <script src="js/jquery.pagination.js"></script>
 9 </head>
10 <body>
11 <div class="box">
12 
13 </div>
14 <div class="M-box"></div>
15 <script src="main.js"></script>
16 </body>
17 </html>

pagination.css

 1 @charset "UTF-8";
 2 
 3 /*.wrapper{*/
 4     /*margin:0 auto;*/
 5     /*width:960px;*/
 6     /*height:100%;*/
 7 /*}*/
 8 .M-box{
 9     position: relative;
10     text-align: center;
11       zoom: 1;
12 }
13 .M-box:before,.M-box:after{
14     content:"";
15     display:table;
16 }
17 .M-box:after{
18     clear:both;
19     overflow:hidden;
20 }
21 .M-box span{
22     float: left;
23     margin:0 5px;
24     width: 38px;
25     height: 38px;
26     line-height: 38px;
27     color: #bdbdbd;
28     font-size: 14px;
29 }
30 .M-box .active{
31     float: left;
32     margin:0 5px;
33     width: 38px;
34     height: 38px;
35     line-height: 38px;
36     background: #e91e63;
37     color: #fff;
38     font-size: 14px;
39     border: 1px solid #e91e63;
40 }
41 .M-box a{
42     float: left;
43     margin:0 5px;
44     width: 38px;
45     height: 38px;
46     line-height: 38px;
47     background: #fff;
48     border: 1px solid #ebebeb;
49     color: #bdbdbd;
50     font-size: 14px;
51 }
52 .M-box a:hover{
53     color:#fff;
54     background: #e91e63;
55 }
56 .M-box .next,.M-box .prev{
57     font-family: "Simsun";
58     font-size: 16px;
59     font-weight: bold;
60 }
61 .now,.count{
62     padding:0 5px;
63     color:#f00;
64 }
65 
66 input{
67     float: left;
68     margin:0 5px;
69     width: 38px;
70     height: 38px;
71     line-height: 38px;
72     text-align: center;
73     background: #fff;
74     border: 1px solid #ebebeb;
75     outline: none;
76     color: #bdbdbd;
77     font-size: 14px;
78 }

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

 1 /**
 2  * Created by mengfanxu on 17/2/3.
 3  */
 4 $(function () {
 5 
 6     var showBox = $('.box');
 7 
 8     $.getJSON('data/package.json', function (data) {
 9         console.log(data.items.length);
10         var item = data.items,length = data.items.length, pageIndex ;
11         //默认页面显示内容
12         showBox.html('姓名：'+item[0]['name']+'\n'+'年龄：'+item[0]['age']);
13         $(".M-box").pagination({
14             pageCount: length,
15             jump: true,
16             coping: true,
17             homePage: '首页',
18             endPage: '末页',
19             preContent: '上页',
20             nextContent: '下页',
21             callback: function (index) {
22                 pageIndex = index.getCurrent()-1;
23                 showBox.html('姓名：'+item[pageIndex]['name']+'\n'+'年龄：'+item[pageIndex]['age']);
24             }
25         })
26     });
27 
28 
29 });

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

秒客网

pagination实现分页功能

相关文章