笔记:自制jquery分页小插件

function fjPage() {
    this.pageBoxName = null;
    this.$pageBox = null;
    this.settings = {
        pageNo: 1, // 当前页
        pageTotal: 0, // 一共多少页
        allCount: 0, // 一共多少条记录
        currentChange: function (pagenumber) { }, // currentPage 改变时会触发
        //nextClick: function (pagenumber) { }, // 用户点击下一页按钮改变当前页后触发
        //prevClick: function (pagenumber) { } //  用户点击上一页按钮改变当前页后触发 
    };
}
fjPage.prototype.init = function (className, opt) {
    this.pageBoxName = className;
    this.$pageBox = $(className);
    if (opt) {
        $.extend(this.settings, opt);
    }

    if (this.settings.pageTotal > 1) {
        this.html();
        this.event();
        this.$pageBox.show()
    } else {
        this.$pageBox.hide()
    }

    
    
}

fjPage.prototype.html = function () {
   
    // debugger
    var pageTotal = this.settings.pageTotal // Math.ceil(this.settings.pageTotal);

    var str1 =
        '  共 ' + pageTotal + ' 页    ' + this.settings.allCount + ' 条记录，' +
        '当前为第 <span class="currentPage"> ' + this.settings.pageNo + ' </span>页 &nbsp;&nbsp;' +
        '跳转到<input type="text" class="num" name="CurrentPage" value="" > 页 ' +
        '<input type="button"    class="sum fj-page-enter" value="确定" >'

    this.$pageBox.find('.fj-pageTip').html(str1);

    var str = '<a href="javascript:;" class="fj-skip-home" >首页</a><a href="javascript:;" class="fj-skip-prev" >上页</a>'
   
    if (this.settings.pageTotal >7 && this.settings.pageNo - 3 > 1) str += '<a href="javascript:;" class="fj-page-more1" >...</a>';

    var startNum = 1;
    var endNum = 7;

    if (pageTotal < 7) endNum = pageTotal;
    else {
        console.log('d')
        if (this.settings.pageNo + 3 > pageTotal) {
            endNum = pageTotal;
            startNum = endNum - 6;
        } else if (this.settings.pageNo - 3 > 0) {
            startNum = this.settings.pageNo - 3;
            endNum = startNum + 6;
        }
    }
    startNum = startNum < 1 ? 1 : startNum;
    for (var i = startNum; i <= endNum; i++) {
        str += '<a href="javascript:;" class="fj-skip-page-i' + (i == this.settings.pageNo ? " selected" : " ") + '" data-i="' + i + ' " >' + i + '</a>';
    }
    if (this.settings.pageTotal > 7 && this.settings.pageNo + 4 < pageTotal) str += '<a href="javascript:;" class="fj-page-more2"  >...</a>';
    str += '<a href="javascript:;" class="fj-skip-next" >下页</a><a href="javascript:;" class="fj-skip-last"   >尾页</a>'
    this.$pageBox.find('.fj-pageList').html(str);

    this.setPageStatus();
}
fjPage.prototype.event = function () {
    var params = { that: this }
    // 确定事件
    $(document).off('click', this.pageBoxName + ' .fj-page-enter', this.eventEnter)
    $(document).on('click', this.pageBoxName + ' .fj-page-enter', params, this.eventEnter)

    // 首页
    $(document).off('click', this.pageBoxName + ' .fj-skip-home', this.eventHome)
    $(document).on('click', this.pageBoxName + ' .fj-skip-home', params, this.eventHome)
    // 上页
    $(document).off('click', this.pageBoxName + ' .fj-skip-prev', this.eventPrev)
    $(document).on('click', this.pageBoxName + ' .fj-skip-prev', params, this.eventPrev)
    // ...
    $(document).off('click', this.pageBoxName + ' .fj-page-more1', this.eventMore1)
    $(document).on('click', this.pageBoxName + ' .fj-page-more1', params, this.eventMore1)
    // ...
    $(document).off('click', this.pageBoxName + ' .fj-page-more2', this.eventMore2)
    $(document).on('click', this.pageBoxName + ' .fj-page-more2', params, this.eventMore2)
    // page-i
    $(document).off('click', this.pageBoxName + ' .fj-skip-page-i', this.eventPageI)
    $(document).on('click', this.pageBoxName + ' .fj-skip-page-i', params, this.eventPageI)
    // 下一页
    $(document).off('click', this.pageBoxName + ' .fj-skip-next', this.eventNext)
    $(document).on('click', this.pageBoxName + ' .fj-skip-next', params, this.eventNext)
    // 尾页
    $(document).off('click', this.pageBoxName + ' .fj-skip-last', this.eventLast)
    $(document).on('click', this.pageBoxName + ' .fj-skip-last', params, this.eventLast)
}

fjPage.prototype.setPageStatus = function () {
    var that = this;
    if (that.settings.pageNo <= 1) {
        $(that.pageBoxName + ' .fj-skip-prev').css('cursor', 'no-drop');
        $(that.pageBoxName + ' .fj-skip-home').css('cursor', 'no-drop');
    }
    if (that.settings.pageNo >= that.settings.pageTotal) {
        $(that.pageBoxName + ' .fj-skip-next').css('cursor', 'no-drop');
        $(that.pageBoxName + ' .fj-skip-last').css('cursor', 'no-drop');
    }
}

fjPage.prototype.eventEnter = function (event) {
    var that = event.data.that;
    var index = Number(that.$pageBox.find('[name=CurrentPage]').val());
    if (that.settings.pageNo == index) { return }
    if (index && index > 0 && Number(index) <= that.settings.pageTotal) {
        that.settings.pageNo = index
        that.settings.currentChange(that.settings.pageNo);
    }
    
}
fjPage.prototype.eventHome = function (event) {
    var that = event.data.that;
    if (that.settings.pageNo <= 1) {
        return;
    }
    that.settings.pageNo = 1
    that.settings.currentChange(that.settings.pageNo);
    
}
fjPage.prototype.eventPrev = function (event) {
    var that = event.data.that;
    if (that.settings.pageNo <= 1) {
        return;
    }
    that.settings.pageNo = that.settings.pageNo - 1 > 0 ? that.settings.pageNo - 1 : 1
    that.settings.currentChange(that.settings.pageNo);
   
}
fjPage.prototype.eventMore1 = function (event) {
    var that = event.data.that;
    that.settings.pageNo = that.settings.pageNo - 1;
    that.settings.currentChange(that.settings.pageNo);
   
}
fjPage.prototype.eventMore2 = function (event) {
    var that = event.data.that;
    that.settings.pageNo = that.settings.pageNo + 4
    that.settings.currentChange(that.settings.pageNo);
    
}
fjPage.prototype.eventPageI = function (event) {
    var that = event.data.that;
    var index = Number($(this).attr('data-i'));
    if (index != that.settings.pageNo) {
        that.settings.pageNo = Number(index)
        that.settings.currentChange(that.settings.pageNo);
    }
     
   
}
fjPage.prototype.eventNext = function (event) {
    var that = event.data.that;
    if (that.settings.pageNo >= that.settings.pageTotal) {
        return;
    }
    that.settings.pageNo = that.settings.pageNo + 1 < that.settings.pageTotal ? that.settings.pageNo + 1 : that.settings.pageTotal;
    that.settings.currentChange(that.settings.pageNo);
   
}
fjPage.prototype.eventLast = function (event) {
    var that = event.data.that;
    if (that.settings.pageNo >= that.settings.pageTotal) {
        return;
    }
    that.settings.pageNo = that.settings.pageTotal
    that.settings.currentChange(that.settings.pageNo);
    
}

<div id="paging" class="bigPage footer">
     <div class="fj-pageList pageNum"></div>
     <div class="fj-pageTip pageTotal"></div>
</div>

<script>
var paging = new fjPage();
paging.init('#paging ', {
    pageNo: 1, // 当前页
    pageTotal: 10, // 一共多少页
    allCount: 100, // 一共多少条记录
     currentChange: function (pagenumber) { // currentPage 改变时会触发
         // console.log(pagenumber)  
     },
})
</script>