pagination實現分頁功能

本文轉載自查看原文 2017-02-03 15:10 7407 jQuery

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);

View Code

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": 13
10     },
11     {
12       "name": "c",
13       "age": 11
14     },
15     {
16       "name": "d",
17       "age": 12
18     },
19     {
20       "name": "e",
21       "age": 12
22     }
23   ]
24 }

View Code

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 angularjs與pagination插件實現分頁功能分頁pagination實現及其應用通過 Django Pagination 實現簡單分頁 elementUi Table Pagination 分頁實現分頁多選 elementUI 的el-pagination 分頁功能 pagination 分頁使用jQuery Pagination Plugin實現分頁效果 uniapp 使用官方 pagination 實現分頁效果 ajax分頁實現，jquery.pagination.js Pagination 分頁