pagination实现分页功能

来源：互联网发布：excel 多表数据透视编辑：程序博客网时间：2024/06/09 15:33

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:

 1 { 2   "items": [ 3     { 4       "name": "a", 5       "age": 12 6     }, 7     { 8       "name": "b", 9       "age": 1310     },11     {12       "name": "c",13       "age": 1114     },15     {16       "name": "d",17       "age": 1218     },19     {20       "name": "e",21       "age": 1222     }23   ]24 }

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

0 0