function customPager($, window, document, undefined) {
"use strict";
var defaults = {
pageIndex: 0,
pageSize: 6,
itemCount: 50,
maxButtonCount: 7,
prevText: "上一页",
nextText: "下一页",
buildPageUrl: null,
onPageChanged: null
};
function Pager($ele, options) {
if (typeof Pager.instance === 'object') {
return Pager.instance
}
this.$ele = $ele;
this.options = options = $.extend(defaults, options || {});
this.init();
Pager.instance = this
return this
}
Pager.prototype = {
constructor: Pager,
init: function() {
this.renderHtml();
this.bindEvent();
},
renderHtml: function() {
var options = this.options;
options.pageCount = Math.ceil(options.itemCount / options.pageSize);
var html = [];
//生成上一页的按钮
if (options.pageIndex > 0) {
html.push('<a page="' + (options.pageIndex - 1) + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '" class="flip">' + options.prevText + '</a>');
} else {
html.push('<span class="flip noPage">' + options.prevText + '</span>');
}
//这里是关键
//临时的起始页码中间页码,当页码数量大于显示的最大按钮数时使用
var tempStartIndex = options.pageIndex - Math.floor(options.maxButtonCount / 2) + 1;
//计算终止页码,通过max计算一排按钮中的第一个按钮的页码,然后计算出页数量
var endIndex = Math.min(options.pageCount, Math.max(0, tempStartIndex) + options.maxButtonCount) - 1;
var startIndex = Math.max(0, endIndex - options.maxButtonCount + 1);
// 第一页
if (startIndex > 0) {
html.push("<a href='" + this.buildPageUrl(0) + "' page='" + 0 + "'>1</a> ");
html.push("<span>...</span>");
}
//生成页码按钮
for (var i = startIndex; i <= endIndex; i++) {
if (options.pageIndex == i) {
html.push('<span class="curPage">' + (i + 1) + '</span>');
} else {
html.push('<a page="' + i + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '">' + (i + 1) + '</a>');
}
}
// 最后一页
if (endIndex < options.pageCount - 1) {
html.push("<span>...</span> ");
html.push("<a href='" + this.buildPageUrl(options.pageCount - 1) + "' page='" + (options.pageCount - 1) + "'>" + options.pageCount + "</a> ");
}
//生成下一页的按钮
if (options.pageIndex < options.pageCount - 1) {
html.push('<a page="' + (options.pageIndex + 1) + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '" class="flip">' + options.nextText + '</a>');
} else {
html.push('<span class="flip noPage">' + options.nextText + '</span>');
}
this.$ele.html(html.join(""));
},
bindEvent: function() {
var that = this;
that.$ele.on("click", "a", function() {
that.options.pageIndex = parseInt($(this).attr("page"), 10);
that.renderHtml();
that.options.onPageChanged && that.options.onPageChanged(that.options.pageIndex);
})
},
buildPageUrl: function() {
if ($.isFunction(this.options.buildPageUrl)) {
return this.options.buildPageUrl(pageIndex);
}
return "javascript:;";
},
getPageIndex: function() {
return this.options.pageIndex;
},
setPageIndex: function(pageIndex) {
this.options.pageIndex = pageIndex;
this.renderHtml();
},
setItemCount: function(itemCount) {
this.options.pageIndex = 0;
this.options.itemCount = itemCount;
this.renderHtml();
}
};
$.fn.pager = function(options) {
options = $.extend(defaults, options || {});
return new Pager($(this), options);
}
}
export {
customPager
}
新建一个js文件,把以上代码复制粘贴到该文件,在需要使用的文件导入customPager
如:import { customPager } from “…/…/xxx”
//使用分页
import { customPager } from "../../xxx"
// 分页控件,html中需有分页标签,类名为pager
//<div class="pager"></div>)
let pageSize = 5
const initpage = (data) => {
$(".pager")
.pager({
pageIndex: 0,
pageSize: pageSize,
itemCount: data.length,
maxButtonCount: 5,
onPageChanged: function(page) {
page = page * pageSize
//切换页码触发
}
})
.setPageIndex(0)//初始化时将页码设置为0,即第一页
};
//下面的data是表格的数据,请求拿到数据再执行下面两个方法
customPager(jQuery, window, document)
initpage(data)