You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
455 lines
17 KiB
455 lines
17 KiB
"use strict";
|
|
/**
|
|
* @author cai
|
|
* @date 2020-09-18
|
|
*/
|
|
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
r[k] = a[j];
|
|
return r;
|
|
};
|
|
var Pagination = /** @class */ (function () {
|
|
function Pagination(options) {
|
|
// 布局可选参数
|
|
this._layout = ['home', 'prev', 'pager', 'total', 'sizes', 'jumper', 'next', 'last'];
|
|
this.options = {
|
|
// 容器
|
|
element: '',
|
|
// 样式类型
|
|
type: 1,
|
|
// 当前页
|
|
pageIndex: 1,
|
|
// 每页显示数量
|
|
pageSize: 0,
|
|
// 每页显示几条
|
|
pageSizes: [],
|
|
// 按钮数量
|
|
pageCount: 9,
|
|
// 总条数
|
|
total: 0,
|
|
// 页面布局
|
|
layout: '',
|
|
// 上一页文字
|
|
prevText: '',
|
|
// 下一页文字
|
|
nextText: '',
|
|
// 页码显示省略
|
|
ellipsis: false,
|
|
// 单页隐藏
|
|
singlePageHide: true,
|
|
// 是否禁用
|
|
disabled: false,
|
|
/**
|
|
* @description 页码变化事件回调
|
|
* @param index [number] 当前页码
|
|
* @param pageSize [number] 每页显示条数 TODO: 只有使用sizes才有返回值
|
|
*/
|
|
currentChange: function (index, pageSize) { },
|
|
};
|
|
this.element = null;
|
|
this.pageNum = 0;
|
|
this.showSelector = false;
|
|
this.selectedIndex = 0;
|
|
this.uniqid = Math.random().toString(36).substr(2);
|
|
if (this.validate(options)) {
|
|
this.init(options);
|
|
}
|
|
}
|
|
// 初始化
|
|
Pagination.prototype.init = function (options) {
|
|
// 参数赋值
|
|
this.setOptions(options);
|
|
// 渲染
|
|
this.render();
|
|
};
|
|
// 渲染
|
|
Pagination.prototype.render = function () {
|
|
var _this_1 = this;
|
|
// 切换每页显示条数重新替换每页条数参数
|
|
if (this.options.layout.indexOf('sizes') !== -1 && this.options.pageSizes instanceof Array) {
|
|
this.options.pageSizes.forEach(function (v, k) {
|
|
if (v == _this_1.options.pageSize) {
|
|
_this_1.selectedIndex = k;
|
|
}
|
|
});
|
|
if (!isNaN(this.options.pageSizes[this.selectedIndex])) {
|
|
this.options.pageSize = this.options.pageSizes[this.selectedIndex];
|
|
}
|
|
}
|
|
// 总页数
|
|
this.pageNum = Math.ceil(this.options.total / this.options.pageSize);
|
|
// 单页隐藏
|
|
if (this.pageNum === 1 && this.options.singlePageHide) {
|
|
// 清空元素
|
|
this.element.innerHTML = '';
|
|
return;
|
|
}
|
|
// 最大页码
|
|
if (this.options.pageIndex > this.pageNum)
|
|
this.options.pageIndex = this.pageNum;
|
|
// 最小页码
|
|
if (this.options.pageIndex <= 0)
|
|
this.options.pageIndex = 1;
|
|
var element = null;
|
|
// 主体容器
|
|
var container = this.createElement('div', '_page_container');
|
|
// layout 渲染
|
|
this.options.layout.split(',').forEach(function (v) {
|
|
if (_this_1._layout.indexOf(v.trim()) !== -1) {
|
|
element = _this_1[v.trim()]();
|
|
element && container.appendChild(element);
|
|
}
|
|
});
|
|
var old_container = document.querySelector(this.options.element + " ._page_container");
|
|
if (old_container) {
|
|
// 保存元素
|
|
this.element.replaceChild(container, old_container);
|
|
}
|
|
else {
|
|
// 保存元素
|
|
this.element.appendChild(container);
|
|
}
|
|
};
|
|
// 首页
|
|
Pagination.prototype.home = function () {
|
|
var _this_1 = this;
|
|
// 禁用样式
|
|
var disabled = this.options.pageIndex <= 1 ? ['_disabled_c'] : [];
|
|
// 手势禁止
|
|
if (this.options.pageIndex <= 1 && this.options.disabled)
|
|
disabled.push('_disabled');
|
|
var element = this.createElement('div', __spreadArrays(['_home', "_home_" + this.options.type], disabled));
|
|
element.innerText = '首页';
|
|
element.addEventListener('click', function () {
|
|
if (_this_1.options.pageIndex > 1) {
|
|
_this_1.handleChangePage(1);
|
|
}
|
|
});
|
|
return element;
|
|
};
|
|
// 上一页
|
|
Pagination.prototype.prev = function () {
|
|
var _this_1 = this;
|
|
// 禁用样式
|
|
var disabled = this.options.pageIndex <= 1 ? ['_disabled_c'] : [];
|
|
// 手势禁止
|
|
if (this.options.pageIndex <= 1 && this.options.disabled)
|
|
disabled.push('_disabled');
|
|
var element = this.createElement('div', __spreadArrays(['_prev', "_prev_" + this.options.type], disabled, (this.options.prevText ? ['_prev_text'] : ['_iconfont', 'iconzuo'])));
|
|
element.innerText = this.options.prevText || '';
|
|
// 上一页事件
|
|
element.addEventListener('click', function () {
|
|
if (_this_1.options.pageIndex > 1) {
|
|
_this_1.handleChangePage(_this_1.options.pageIndex - 1);
|
|
}
|
|
});
|
|
return element;
|
|
};
|
|
// 页码
|
|
Pagination.prototype.pager = function () {
|
|
var _this_1 = this;
|
|
var _this = this, li, active, attr;
|
|
// 页码容器
|
|
var ul = this.createElement('ul', ['_pages', "_pages_" + this.options.type]);
|
|
// 区间值
|
|
var between = this.getBetween();
|
|
// 生成区间值
|
|
var arrs = this.generateArray(between.min, between.max);
|
|
// 显示省略页码
|
|
if (this.options.ellipsis) {
|
|
// 判断是否不存在最小页码
|
|
if (arrs[0] > 1) {
|
|
arrs.splice(1, 0, '...');
|
|
arrs[0] = 1;
|
|
}
|
|
// 判断是否不存在最大页码
|
|
if (arrs[arrs.length - 1] < this.pageNum) {
|
|
arrs.splice(arrs.length - 1, 0, '...');
|
|
arrs[arrs.length - 1] = this.pageNum;
|
|
}
|
|
}
|
|
// 生成页码
|
|
arrs.forEach(function (v, k) {
|
|
active = v === _this_1.options.pageIndex ? ["_active_" + _this_1.options.type] : [];
|
|
// 手势禁止
|
|
if (v === _this_1.options.pageIndex && _this_1.options.disabled)
|
|
active.push('_disabled');
|
|
li = _this_1.createElement('li', __spreadArrays(["_pages_li_" + _this_1.options.type], active));
|
|
if (isNaN(v)) {
|
|
if (k <= 1) {
|
|
attr = 'prev';
|
|
li.classList.add('_pager_prev');
|
|
}
|
|
else {
|
|
attr = 'next';
|
|
li.classList.add('_pager_next');
|
|
}
|
|
li._id = attr;
|
|
}
|
|
else {
|
|
li.innerText = v.toString();
|
|
}
|
|
li.addEventListener('click', function () {
|
|
// 省略号向上跳转
|
|
if (this._id === 'prev') {
|
|
var prevIndex = _this.options.pageIndex - _this.options.pageCount + 2;
|
|
_this.handleChangePage(prevIndex < 1 ? 1 : prevIndex);
|
|
return;
|
|
}
|
|
// 省略号向下跳转
|
|
if (this._id === 'next') {
|
|
var nextIndex = _this.options.pageIndex + _this.options.pageCount - 2;
|
|
_this.handleChangePage(nextIndex > _this.pageNum ? _this.pageNum : nextIndex);
|
|
return;
|
|
}
|
|
if (v != _this.options.pageIndex) {
|
|
_this.handleChangePage(v);
|
|
}
|
|
});
|
|
ul.appendChild(li);
|
|
});
|
|
return ul;
|
|
};
|
|
// 下一页
|
|
Pagination.prototype.next = function () {
|
|
var _this_1 = this;
|
|
// 禁用下一页
|
|
var disabled = this.options.pageIndex >= this.pageNum ? ['_disabled_c'] : [];
|
|
// 手势禁止
|
|
if (this.options.pageIndex >= this.pageNum && this.options.disabled)
|
|
disabled.push('_disabled');
|
|
// 下一页
|
|
var element = this.createElement('div', __spreadArrays(['_next', "_next_" + this.options.type], disabled, (this.options.nextText ? ['_next_text'] : ['_iconfont', 'iconGroup-'])));
|
|
// 下一页文字
|
|
element.innerText = this.options.nextText || '';
|
|
// 下一页事件
|
|
element.addEventListener('click', function () {
|
|
if (_this_1.options.pageIndex < _this_1.pageNum) {
|
|
_this_1.handleChangePage(_this_1.options.pageIndex + 1);
|
|
}
|
|
});
|
|
return element;
|
|
};
|
|
// 尾页
|
|
Pagination.prototype.last = function () {
|
|
var _this_1 = this;
|
|
// 禁用下一页
|
|
var disabled = this.options.pageIndex >= this.pageNum ? ['_disabled_c'] : [];
|
|
// // 手势禁止
|
|
if (this.options.pageIndex >= this.pageNum && this.options.disabled)
|
|
disabled.push('_disabled');
|
|
var element = this.createElement('div', __spreadArrays(['_last', "_last_" + this.options.type], disabled));
|
|
element.innerText = '尾页';
|
|
element.addEventListener('click', function () {
|
|
if (_this_1.options.pageIndex < _this_1.pageNum) {
|
|
_this_1.handleChangePage(_this_1.pageNum);
|
|
}
|
|
});
|
|
return element;
|
|
};
|
|
// 输入框跳转
|
|
Pagination.prototype.jumper = function () {
|
|
var _this = this;
|
|
// 容器
|
|
var jumper = this.createElement('div', '_jumper');
|
|
// 总页码
|
|
var total = this.createElement('div', '_count');
|
|
total.innerText = "\u5171 " + this.pageNum + " \u9875";
|
|
jumper.appendChild(total);
|
|
var text_1 = this.createElement('span');
|
|
text_1.innerText = '前往';
|
|
jumper.appendChild(text_1);
|
|
var value = 0;
|
|
// 输入框
|
|
var input = this.createElement('input', ['_jumper_input', this.uniqid]);
|
|
input.type = 'number';
|
|
input.value = this.options.pageIndex.toString();
|
|
input.setAttribute('min', '1');
|
|
input.setAttribute('max', this.pageNum.toString());
|
|
var handle = ['blur', 'keydown'];
|
|
handle.forEach(function (v) {
|
|
input.addEventListener(v, function (e) {
|
|
if (e.type === 'keydown' && e.keyCode !== 13) {
|
|
return;
|
|
}
|
|
value = ~~this.value;
|
|
if (value < 1)
|
|
value = 1;
|
|
if (value > _this.pageNum)
|
|
value = _this.pageNum;
|
|
// @ts-ignore
|
|
this.value = value;
|
|
if (value !== _this.options.pageIndex)
|
|
_this.handleChangePage(value);
|
|
// 获取焦点
|
|
if (e.keyCode == 13) {
|
|
setTimeout(function () {
|
|
document.querySelector("." + _this.uniqid).focus();
|
|
});
|
|
}
|
|
});
|
|
});
|
|
jumper.appendChild(input);
|
|
var text_2 = this.createElement('span');
|
|
text_2.innerText = '页';
|
|
jumper.appendChild(text_2);
|
|
return jumper;
|
|
};
|
|
// 选择页码
|
|
Pagination.prototype.sizes = function () {
|
|
var _this_1 = this;
|
|
var _this = this;
|
|
var success = false;
|
|
var mode = '';
|
|
var lis = null;
|
|
var active = [];
|
|
var element = this.createElement('div', '_sizes');
|
|
// 选择框容器
|
|
var box = this.createElement('div', '_sizes_select_container');
|
|
// 每页条数选择框
|
|
var ul = this.createElement('ul', '_sizes_select');
|
|
if (this.options.pageSizes instanceof Array) {
|
|
// 渲染选择框
|
|
this.options.pageSizes.forEach(function (v, key) {
|
|
if (!isNaN(v)) {
|
|
success = true;
|
|
active = _this_1.selectedIndex === key ? ['_sizes_select_active'] : [];
|
|
lis = _this_1.createElement('li', __spreadArrays(['_sizes_select_li'], active));
|
|
lis.innerText = v + "\u6761/\u9875";
|
|
lis.addEventListener('click', function () {
|
|
if (_this.selectedIndex !== key) {
|
|
_this.selectedIndex = key;
|
|
_this.handleChangePage(1);
|
|
}
|
|
else {
|
|
var mode_1 = _this.showSelector ? 'remove' : 'add';
|
|
i.classList[mode_1]('_sizes_icon_rotate');
|
|
box.classList[mode_1]('_sizes_select_container_show');
|
|
_this.showSelector = !_this.showSelector;
|
|
}
|
|
});
|
|
ul.appendChild(lis);
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
return false;
|
|
}
|
|
if (!success)
|
|
return false;
|
|
box.appendChild(ul);
|
|
element.appendChild(box);
|
|
var text = this.createElement('div', '_sizes_text');
|
|
text.innerText = this.options.pageSizes[this.selectedIndex] + "\u6761/\u9875";
|
|
// 显示选择框、旋转icon
|
|
text.addEventListener('click', function () {
|
|
this.classList.add('_sizes_active');
|
|
mode = _this.showSelector ? 'remove' : 'add';
|
|
_this.showSelector = !_this.showSelector;
|
|
i.classList[mode]('_sizes_icon_rotate');
|
|
box.classList[mode]('_sizes_select_container_show');
|
|
});
|
|
var i = this.createElement('i', ['icon_down', '_iconfont', 'iconGroup-1']);
|
|
text.appendChild(i);
|
|
element.appendChild(text);
|
|
return element;
|
|
};
|
|
// 总页数
|
|
Pagination.prototype.total = function () {
|
|
var element = this.createElement('div', '_count');
|
|
element.innerText = "\u5171 " + this.options.total + " \u6761";
|
|
return element;
|
|
};
|
|
// 页码变化
|
|
Pagination.prototype.handleChangePage = function (index) {
|
|
this.options.pageIndex = index;
|
|
this.showSelector = false;
|
|
// 回调
|
|
if (typeof this.options.currentChange === 'function') {
|
|
if (this.options.pageSizes[this.selectedIndex])
|
|
this.options.pageSize = this.options.pageSizes[this.selectedIndex];
|
|
this.options.currentChange(index, this.options.pageSize);
|
|
}
|
|
// 重新渲染
|
|
this.render();
|
|
};
|
|
// 计算区间值
|
|
Pagination.prototype.getBetween = function () {
|
|
// 最小下标
|
|
var min = this.options.pageIndex - Math.floor(this.options.pageCount / 2);
|
|
// 最小下标最大值
|
|
if (min > this.pageNum - this.options.pageCount) {
|
|
min = this.pageNum - this.options.pageCount + 1;
|
|
}
|
|
// 最小值
|
|
if (min <= 1)
|
|
min = 1;
|
|
// 最大下标
|
|
var max = this.options.pageIndex + Math.floor(this.options.pageCount / 2);
|
|
// 最大下标最小值
|
|
if (max < this.options.pageCount)
|
|
max = this.options.pageCount;
|
|
// 最大值
|
|
if (max > this.pageNum)
|
|
max = this.pageNum;
|
|
return { min: min, max: max };
|
|
};
|
|
// 生成区间数组
|
|
Pagination.prototype.generateArray = function (start, end) {
|
|
var arr = [];
|
|
for (var i = start; i <= end; i++) {
|
|
arr.push(i);
|
|
}
|
|
return arr;
|
|
};
|
|
// 创建元素
|
|
Pagination.prototype.createElement = function (tag, classList) {
|
|
var dom = document.createElement(tag);
|
|
if (classList) {
|
|
if (classList instanceof Array) {
|
|
classList.forEach(function (v) {
|
|
dom.classList.add(v);
|
|
});
|
|
}
|
|
else {
|
|
dom.classList.add(classList);
|
|
}
|
|
}
|
|
return dom;
|
|
};
|
|
// 参数验证
|
|
Pagination.prototype.validate = function (options) {
|
|
if (!options)
|
|
throw new Error('options of null');
|
|
if (typeof options !== 'object')
|
|
throw new Error('options not an object');
|
|
if (!document.querySelector(options.element))
|
|
throw new Error('element of null');
|
|
if (!options.layout)
|
|
throw new Error('layout of null');
|
|
['type', 'pageIndex', 'pageSize', 'pageCount', 'total'].forEach(function (v) {
|
|
if (options[v]) {
|
|
if (isNaN(options[v]))
|
|
throw new Error(v + " not an number");
|
|
if (v === 'pageCount' && options[v] % 2 === 0)
|
|
throw new Error(v + " not an odd number");
|
|
if (v === 'pageCount' && options[v] < 4)
|
|
throw new Error(v + " must be greater than four");
|
|
}
|
|
});
|
|
return true;
|
|
};
|
|
// 参数赋值
|
|
Pagination.prototype.setOptions = function (options) {
|
|
// 容器
|
|
this.element = document.querySelector(options.element);
|
|
for (var name_1 in options) {
|
|
if (options[name_1] !== void 0) {
|
|
this.options[name_1] = isNaN(options[name_1]) ? options[name_1] : +options[name_1];
|
|
}
|
|
}
|
|
};
|
|
return Pagination;
|
|
}());
|
|
|