jQ封装翻页功能插件

一、实现

1.引用

<script>
    $('.demo').page({//demo调用该插件的元素
        size: 10,//每页显示数据数目
        current: 1,//当前所在页码
        allPage: 10,//总页数
        changePage: function (page, size) {
            console.log(page, size)
        }//调用的函数，自定义
    });
</script>

2.原代码

(function(){
    function TurnPage(options,wrap){
        this.wrap = wrap;
        this.size = options.size || 5;//每页显示数据数目
        this.current = options.current || 1;//当前所在页码
        this.allPage = options.allPage || (options.allSize ? Math.ceil(options.allSize / this.size) : 1);//一共多少页
        this.changePage = options.changePage || function () {};
    };
    // 初始化
    TurnPage.prototype.init = function () {
        if (this.current > this.allPage) {
            alert('当前页码大于总页数');
        } else {
            this.fillHtml();
            this.bindEvent();
        }
    };
    //翻页处理
    TurnPage.prototype.bindEvent = function(){
        var self = this;
        $('.my-page-prev',this.wrap).click(function(){
            self.current --;
            self.change();//上一页
        });
        $('.my-page-next',this.wrap).click(function(){
            self.current ++;
            self.change();//下一页
        });
        $('.my-page-num',this.wrap).click(function(){
            self.current  = parseInt($(this).text());
            self.change();//输入页码
        });
        $('.my-page-size-inp').change(function(){
            console.log($(this).val());
            self.size = parseInt($(this).val());
            self.current = 1;
            self.change();
        });//监控输入的数字
    };
    //功能调用
    TurnPage.prototype.change = function () {
        this.fillHtml();//重新加载页面
        this.bindEvent();//重新绑定事件
        this.changePage(this.current, this.size);//
    };
    //填充页面结构
    TurnPage.prototype.fillHtml = function(){
        $(this.wrap).empty();
        var myPageDiv = $('<div class="my-page"></div>');
        var pageSizeDiv = $('<div class="my-page-size">每一页条数:<input class="my-page-size-inp" type="number" min=1 max=50 value=' + this.size + ' /></div>')
        var myTurnPage = $('<ul class="my-turn-page"></ul>');
        //判断上一页按钮出现
        if(this.current > 1){
            $('<li class="my-page-prev">上一页</li>').appendTo(myTurnPage);
        };
        // 添加第一页
        $('<li class="my-page-num">1</li>').appendTo(myTurnPage).addClass(this.current == 1 ? 'current-page': '');
        //判断前面...出现
        if(this.current -3 > 1){
            $('<span>...</span>').appendTo(myTurnPage);
        }
        //中间5页的显示
        for(var i = this.current - 2;i <= this.current + 2;i ++){
            if(i > 1 && i < this.allPage){
                $('<li class="my-page-num"></li>').text(i).appendTo(myTurnPage).addClass(this.current == i ? 'current-page': '');
            }
        };
        //判断后面..出现
        if(this.current + 3 < this.allPage){
            $('<span>...</span>').appendTo(myTurnPage);
        };
        //最后一页
        this.allPage != 1 &&  $('<li class="my-page-num"></li>').text(this.allPage).appendTo(myTurnPage).addClass(this.current == this.allPage ? 'current-page': '');
        //判断下一页按钮出现
        if(this.current < this.allPage){
            $('<li class="my-page-next">下一页</li>').appendTo(myTurnPage);
        };
        myPageDiv.append(pageSizeDiv).append(myTurnPage).appendTo(this.wrap);
    };
    $.fn.extend({
        page: function (options) {
            var obj = new TurnPage(options,this);
            obj.init();//初始化页面
        }
    })
})()