import { LightningElement, track, api } from 'lwc';
|
|
export default class JzDataTablePaging extends LightningElement {
|
@api name;
|
@api options = {};
|
|
connectedCallback(){
|
this.initJzDataTablePaging(this.options);
|
}
|
|
@track
|
config = {
|
// 单页是否显示
|
singlePageHide: true,
|
// 总页数
|
pageNum: 0,
|
// 上一页Class
|
prevClass: '',
|
// 下一页Class
|
nextClass: '',
|
// 首页Class
|
homeClass: '',
|
// 尾页Class
|
lastClass: '',
|
// ul Class 根据类型不同显示不同样式
|
ulClass: '',
|
// 页码列表 {dataIndex：页码 pagesLiClass：页码所在对样式}
|
pagesList: [],
|
}
|
|
@track
|
pagingConfig = {
|
// 容器名
|
elementName: '',
|
// 样式类型 1或2
|
type: 1,
|
// 当前页
|
pageIndex: 1,
|
// 每页显示数量
|
pageSize: 0,
|
// 总条数
|
total: 0,
|
// 按钮数量
|
pageCount: 9,
|
// 上一页文字
|
prevText: '',
|
// 下一页文字
|
nextText: '',
|
// 首页文字
|
homeText: '',
|
// 尾页文字
|
lastText: '',
|
// 输入框跳转
|
jumper: false,
|
// 单页隐藏
|
singlePageHide: true,
|
// 是否禁用
|
disabled: false,
|
/**
|
* @description 按钮事件回调
|
* @param index [number] 当前页码
|
*/
|
currentChange: function (index) { },
|
};
|
|
ceshi(){
|
let options01 = {
|
elementName: 'pages',
|
type: 1,
|
pageIndex: 1,
|
pageSize: 10,
|
total: 100,
|
pageCount: 5,
|
jumper: true,
|
singlePageHide: false,
|
prevText: '上一页',
|
nextText: '下一页',
|
// 首页文字
|
homeText: '首页',
|
// 尾页文字
|
lastText: '尾页',
|
disabled: true,
|
currentChange: function(index) {
|
// console.log(index);
|
}
|
}
|
this.initJzDataTablePaging(options01);
|
}
|
|
@api
|
initJzDataTablePaging(options) {
|
this.pagingConfig = {...this.pagingConfig, ...options};
|
if (this.validate(this.pagingConfig)) {
|
this.render();
|
}
|
};
|
|
@api
|
get getPage() {
|
return {
|
currentPage: this.pagingConfig.pageIndex,
|
total: this.pagingConfig.total,
|
pageSize: this.pagingConfig.pageSize
|
};
|
}
|
|
// 提供初始化
|
render = function () {
|
// 总页数
|
this.config.pageNum = Math.ceil(this.pagingConfig.total / this.pagingConfig.pageSize);
|
// 单页隐藏
|
if (this.config.pageNum === 1 && this.pagingConfig.singlePageHide){
|
this.config.singlePageHide = true;
|
return;
|
} else {
|
this.config.singlePageHide = false;
|
}
|
this.config.ulClass = "_pages _pages_" + this.pagingConfig.type;
|
// 刷新分页控件内容
|
this.refreshPaging(this.pagingConfig.pageIndex);
|
};
|
|
// 刷新分页控件内容
|
refreshPaging(index){
|
// 最大页码
|
if (index > this.config.pageNum)
|
index = this.config.pageNum;
|
// 最小页码
|
if (index <= 0)
|
index = 1;
|
|
this.pagingConfig.pageIndex = index;
|
|
// 禁用上一页
|
var prev_disabled = this.pagingConfig.pageIndex <= 1 ? ' _disabled_c ' : '';
|
// 手势禁止
|
if (this.pagingConfig.pageIndex <= 1 && this.pagingConfig.disabled)
|
prev_disabled += ' _disabled ';
|
// 首页样式
|
if (this.pagingConfig.type <= 1) {
|
this.config.homeClass = '_home' + prev_disabled;
|
}
|
// 上一页
|
this.config.prevClass = '_prev_ ' + prev_disabled + (this.pagingConfig.prevText ? ' _prev' : '_iconfont iconzuo');
|
// 区间值
|
let between = this.getBetween();
|
let pagesList = [];
|
let pagesLi = {};
|
let active;
|
for (var i = 1; i <= this.config.pageNum; i++) {
|
if (i >= between.min && i <= between.max) {
|
active = "_pages_li_" + this.pagingConfig.type;
|
active += i === this.pagingConfig.pageIndex ? " _active_" + this.pagingConfig.type : "";
|
// 手势禁止
|
if (i === this.pagingConfig.pageIndex && this.pagingConfig.disabled)
|
active += ' _disabled';
|
pagesLi = {
|
'dataIndex': i,
|
'pagesLiClass': active
|
}
|
pagesList.push(pagesLi);
|
}
|
}
|
this.config.pagesList = pagesList;
|
|
// 禁用下一页
|
var next_disabled = this.pagingConfig.pageIndex >= this.config.pageNum ? ' _disabled_c ' : '';
|
// 手势禁止
|
if (this.pagingConfig.pageIndex >= this.config.pageNum && this.pagingConfig.disabled)
|
next_disabled += ' _disabled ';
|
// 下一页
|
this.config.nextClass = '_next_ ' + next_disabled + (this.pagingConfig.nextText ? ' _next' : ' _iconfont iconGroup-')
|
// 尾页
|
if (this.pagingConfig.type <= 1) {
|
this.config.lastClass = '_last ' + next_disabled;
|
}
|
}
|
|
//点击首页
|
homeClick(){
|
if (this.pagingConfig.pageIndex > 1) {
|
this.refreshPaging(1);
|
this.callback(1);
|
}
|
}
|
//点击上一页
|
prevClick(){
|
if (this.pagingConfig.pageIndex - 1 > 0) {
|
this.refreshPaging(this.pagingConfig.pageIndex - 1);
|
this.callback(this.pagingConfig.pageIndex - 1);
|
}
|
}
|
//区间值点击事件
|
pagesClick(event){
|
let pagesVal = event.target.innerText;
|
if (pagesVal != this.pagingConfig.pageIndex) {
|
this.refreshPaging(Number(pagesVal));
|
this.callback(Number(pagesVal));
|
}
|
}
|
//点击下一页
|
nextClick(){
|
if (this.pagingConfig.pageIndex < this.config.pageNum) {
|
this.refreshPaging(this.pagingConfig.pageIndex + 1);
|
this.callback(this.pagingConfig.pageIndex + 1);
|
}
|
}
|
//点击尾页
|
lastClick(){
|
if (this.pagingConfig.pageIndex < this.config.pageNum) {
|
this.refreshPaging(this.config.pageNum);
|
this.callback(this.config.pageNum);
|
}
|
}
|
//输入页号
|
jumperPageNumBlur(event){
|
let value_1 = ~~event.target.value;
|
let value_2 = value_1;
|
// 最大页码
|
if (value_1 > this.config.pageNum)value_2 = this.config.pageNum;
|
// 最小页码
|
if (value_1 <= 0)value_2 = 1;
|
|
if (value_2 !== this.pagingConfig.pageIndex){
|
this.refreshPaging(value_2);
|
this.callback(value_2);
|
} else {
|
if(value_1 !== this.pagingConfig.pageIndex){
|
this.pagingConfig.pageIndex = value_1;
|
this.pagingConfig.pageIndex = value_2;
|
}
|
}
|
}
|
// 回调
|
callback(index){
|
// 回调
|
typeof this.pagingConfig.currentChange === 'function' && this.pagingConfig.currentChange(index);
|
|
let page = {
|
currentPage: this.pagingConfig.pageIndex,
|
total: this.pagingConfig.total,
|
pageSize: this.pagingConfig.pageSize
|
};
|
const getPageEvent = new CustomEvent('pagingclick', {
|
detail: {page: page}
|
});
|
this.dispatchEvent(getPageEvent);
|
}
|
|
getBetween = function () {
|
// 最小下标
|
var min = this.pagingConfig.pageIndex - Math.floor(this.pagingConfig.pageCount / 2);
|
// 最小下标最大值
|
if (min > this.config.pageNum - this.pagingConfig.pageCount) {
|
min = this.config.pageNum - this.pagingConfig.pageCount + 1;
|
}
|
// 最小值
|
if (min <= 1)
|
min = 1;
|
// 最大下标
|
var max = this.pagingConfig.pageIndex + Math.floor(this.pagingConfig.pageCount / 2);
|
// 最大下标最小值
|
if (max < this.pagingConfig.pageCount)
|
max = this.pagingConfig.pageCount;
|
// 最大值
|
if (max > this.config.pageNum)
|
max = this.config.pageNum;
|
return { min: min, max: max };
|
};
|
validate = function (options) {
|
if (!options)
|
throw new Error('options of null');
|
if (typeof options !== 'object')
|
throw new Error('options not an object');
|
try {
|
['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");
|
}
|
});
|
}
|
catch (error) {
|
throw new Error(error);
|
}
|
return true;
|
};
|
|
// 判断类型是否为1
|
get isType1(){
|
return this.pagingConfig.type === 1;
|
}
|
}
|
