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>页 ' +
'跳转到<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>