jq前端实现分页效果小插件

最近实现了一个分页的jq插件分享出来。

一、需求
　　后端数据一股脑抛过来，列表形式显示内容，由于数据量庞大，就考虑分页实现了。本插件声明（未考虑性能问题，只是实现了相应功能）。

二、选择

　　插件开发最快速方法莫过于jquery的插件开发功能

三、插件源码奉上

(function($,window){
        var Page = function(ele,opt){
            this.$ele = ele;
            this.defaults ={
                    curPage: 1,
                    totalPage: 1,
                    totalCount: 0,
                    morePage: opt.morePage,
                    perPageCount: opt.perPageCount
            }
            this.options = $.extend({},this.defaults,opt);
        }
        Page.prototype = {
            init: function () {
                //数据初始化
                this.dataInit();
                //显示当前页数、总页数
                this.pageInit();
                //分页处理
                this.pageFun();
                //销毁之前事件
                this.offEventFun();
                //事件处理
                this.eventFun();
                return this.$ele;
            },
            pageInit: function () {
                $(this.options.curPageEl).html("当前第" + this.options.curPage + "页");
                $(this.options.totalEl).html("共" + this.options.totalPage + "页");
            },
            pageFun: function () {
                var $list = this.$ele.children();
                $list.hide();
                var start = (this.options.curPage - 1) * this.options.perPageCount;
                if (this.options.curPage == this.options.totalPage) {
                    var end = $list.length;
                    for (var i = start; i < end; i++) {
                        $($list[i]).show();
                    }
                } else {
                    for (var i = start; i < start + this.options.perPageCount; i++) {
                        $($list[i]).show();
                    }
                }
                this.pageInit();
            }
            ,
            dataInit: function () {
                var $list = this.$ele.children();
                this.options.curPage = 1;
                this.options.totalCount = $list.length;
                this.options.totalPage = Math.ceil($list.length / this.options.perPageCount);
            },
            eventFun:function(){
                //下一页
                var self = this;
                $(this.options.next).on("click", function () {
                    if (self.options.curPage + 1 > self.options.totalPage) {
                        alert("已经是最后一页");
                        return;
                    }
                    self.options.curPage++;
                    self.pageFun();
                });
                //上一页
                $(this.options.prev).on("click", function () {
                    if (self.options.curPage - 1 < 1) {
                        alert("已经是第一页");
                        return;
                    }
                    self.options.curPage--;
                    self.pageFun();
                });
                //下n页
                $(this.options.nextMore).on("click", function () {
                    if (self.options.curPage + self.options.morePage > self.options.totalPage){
                        self.options.curPage = self.options.totalPage;
                        alert("已经是最后一页")
                    }else{
                        self.options.curPage += self.options.morePage;
                    }
                    self.pageFun();
                });
                //上n页
                $(this.options.prevMore).on("click", function () {
                    if (self.options.curPage - self.options.morePage < 1){
                        self.options.curPage = 1;
                        alert("已经是第一页")
                    }else{
                        self.options.curPage -= self.options.morePage;
                    }
                    self.pageFun();
                });
            },
            offEventFun:function(){
                $(this.options.next).off("click");
                $(this.options.prev).off("click");
                $(this.options.nextMore).off("click");
                $(this.options.prevMore).off("click");
            }
        }
        $.fn.page = function(options){
            var page = new Page(this,options);
            return page.init();
        }
    })(jQuery,window)

四、用法

　　1.页面头部引入

     2.css样式表，将需要分页的列表项全部隐藏

#demo>div{
            display:none;
}

    3.html代码列子如下

    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456
    
123456

下一页
上一页
下5页
上5页

4.调用方法实现分页

var pageParam = {
        next: '.next',//下一页按钮jq选择器
        prev: '.prev',//上一页按钮jq选择器
        nextMore: '.nextMore',//下n页按钮jq选择器
        prevMore: '.prevMore',//上n页按钮jq选择器
        totalEl: '.total',//总页数jq元素  元素内包含 eq:“共n页”
        curPageEl: '.cur_page',//当前页数jq元素  元素内包含 eq:“当前第n页”
        perPageCount: 4,//每页显示数量
        morePage: 5//上、下n页跳转数
    }
    //demo为包裹列表的容器
    $("#demo").page(pageParam);