video_system/public/static/js/xlPaging.js

;(function ($, window, document, undefined) {
    'use strict';
    function Paging(element, options) {
        this.element = element;
        this.options = {
            nowPage: options.nowPage || 1, // 当前页码
            pageNum: options.pageNum, // 总页码
            buttonNum: (options.buttonNum>=5?options.buttonNum:5) || 7,// 页面显示页码数量
            callback: options.callback // 回调函数
        };
        this.init();
    }
    Paging.prototype =  {
        constructor : Paging,
        init : function() {
            this.createHtml();
            this.bindClickEvent();
            this.disabled();
        },
        createHtml : function(){
            var me = this;
            var nowPage = this.options.nowPage;
            var pageNum = this.options.pageNum;
            var buttonNum = this.options.buttonNum;
            var content = [];
            content.push("<ul>");
            content.push("<li class='xl-prevPage'>上一页</li>");
            //页面总数小于等于当前要展示页数总数，展示所有页面
            if(pageNum <= buttonNum){
                for(var i=1; i<=pageNum; i++){
                    if (nowPage !== i) {
                        content.push("<li>"+i+"</li>");
                    } else {
                        content.push("<li class='xl-active'>"+i+"</li>");
                    }
                }
            }else if(nowPage <= Math.floor(buttonNum / 2)){
                //当前页面小于等于展示页数总数的一半（向下取整），从1开始
                for(var i=1;i<= buttonNum-2;i++){
                    if (nowPage !== i) {
                        content.push("<li>"+i+"</li>");
                    } else {
                        content.push("<li class='xl-active'>"+i+"</li>");
                    }
                }
                content.push("<li class='xl-disabled'>...</li>");
                content.push("<li>" + pageNum + "</li>");
            }else  if(pageNum - nowPage <= Math.floor(buttonNum / 2)){
                //当前页面大于展示页数总数的一半（向下取整）
                content.push("<li>"+1+"</li>");
                content.push("<li class='xl-disabled'>...</li>");
                for(var i=pageNum-buttonNum+3; i<=pageNum; i++){
                    if (nowPage !== i) {
                        content.push("<li>"+i+"</li>");
                    } else {
                        content.push("<li class='xl-active'>"+i+"</li>");
                    }
                }
            }else{
                //前半部分页码
                if(nowPage - Math.floor(buttonNum / 2) <= 0){
                    for(var i=1;i<= Math.floor(buttonNum / 2);i++){
                        if (nowPage !== i) {
                            content.push("<li>"+i+"</li>");
                        } else {
                            content.push("<li class='xl-active'>"+i+"</li>");
                        }
                    }
                }else{
                    content.push("<li>"+1+"</li>");
                    content.push("<li class='xl-disabled'>...</li>");
                    for(var i=nowPage-Math.floor(buttonNum / 2)+(buttonNum % 2 == 0 ? 3: 2); i<=nowPage; i++){
                        if (nowPage !== i) {
                            content.push("<li>"+i+"</li>");
                        } else {
                            content.push("<li class='xl-active'>"+i+"</li>");
                        }
                    }

                }
                //后半部分页码
                if(pageNum - nowPage <= 0){
                    for(var i=nowPage+1;i<=pageNum;i++){
                        content.push("<li>" + i + "</li>");
                    }
                }else{
                    for(var i=nowPage+1; i<=nowPage+Math.floor(buttonNum / 2)-2; i++){
                        content.push("<li>"+i+"</li>");
                    }
                    content.push("<li class='xl-disabled'>...</li>");
                    content.push("<li>" + pageNum + "</li>");
                }
            }
            content.push("<li class='xl-nextPage'>下一页</li>");
            content.push("</ul>");
            me.element.html(content.join(''));
             // DOM重新生成后每次调用是否禁用button
            setTimeout(function () {
                me.disabled();
            }, 20);
            
        },
        bindClickEvent: function(){
            var me = this;
            me.element.off('click', 'li');
            me.element.on('click', 'li', function () {
                var cla = $(this).attr('class');
                var num = parseInt($(this).html());
                var nowPage = me.options.nowPage;
                if( $(this).hasClass('xl-disabled')){
                    return ;
                }
                if (cla === 'xl-prevPage') {
                    if (nowPage !== 1) {
                        me.options.nowPage -= 1;
                    }
                } else if (cla === 'xl-nextPage') {
                    if (nowPage !== me.options.pageNum) {
                        me.options.nowPage += 1;
                    }
                }else {
                    me.options.nowPage = num;
                }
                me.createHtml();
                if (me.options.callback) {
                    me.options.callback(me.options.nowPage);
                }
            });

        },
        disabled: function () {
            var me = this;
            var nowPage = me.options.nowPage;
            var pageNum = me.options.pageNum;
            if (nowPage === 1) {
                me.element.children().children('.xl-prevPage').addClass('xl-disabled');
            } else if (nowPage === pageNum) {
                me.element.children().children('.xl-nextPage').addClass('xl-disabled');
            }
        }
    }
    $.fn.paging = function (options) {
        return new Paging($(this), options);
    }
})(jQuery, window, document);