https://cdn.pacdora.com/scripts/layout-ui/js/pagination.js

1const defaultStyle = `
2 ._pagination_container {
3    display: flex;
4    justify-content: center;
5    align-items: center;
6  }
7  ._pagination_item {
8    display: flex;
9    align-items: center;
10    justify-content: center;
11    margin: 0 4px;
12    min-width: 32px;
13    height: 32px;
14    border-radius: 50%;
15    font-size: 14px;
16    color: #4c4c4c;
17    background-color: #fff;
18    font-weight: normal;
19    cursor: pointer;
20    position: relative;
21  }
22  ._pagination_item:hover {
23    background-color: #f9f9f9;
24    i {
25      //color: var(--brand-color);
26    }
27  }
28  ._pagination_item:active {
29    background-color: #e7e5ec;
30    font-weight: 500;
31  }
32  ._pagination_item.active {
33    background: var(--brand-color);
34    color: #fff;
35    font-weight: 600;
36    border-color: transparent;
37    cursor: default;
38  }
39
40  /*  后退  */
41  .back-icon {
42    transform: rotate(180deg);
43  }
44  .arrow-icon{
45    color: #191919;
46    font-size: 20px;
47  }
48  ._pagination_item.disabled {
49    opacity: 0.38;
50    // cursor: not-allowed;
51    pointer-events: none;
52  }
53  .tool-tip {
54    // word-wrap: break-word;
55    white-space: nowrap;
56    padding: 1px 6px;
57    position: absolute;
58    bottom: -30px;
59    background: rgba(255, 255, 255, 0.75);
60    border-radius: 6px;
61    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
62    font-size: 12px;
63    font-weight: 400;
64    text-align: left;
65    color: #4c4c4c;
66    line-height: 22px;
67    opacity: 0;
68    visibility: hidden;
69  }
70  .tool-tip-show {
71    visibility: visible;
72    transition: opacity 0.3s ease-in-out;
73    opacity: 1;
74  }
75  .icon-hover{
76    color: #191919;
77    font-size: 20px;
78  }
79    
80`;
81
82export class Pagination {
83  _currentPage = 1; // Current page
84  _totalPages = 1; // Total number of pages
85
86  _associatedContainer = null; // 与当前分页器关联的容器 元素
87  _maxPaginationItem = 5; // 最大显示的分页数 ,小于这个值，直接全部显示
88  _clickCallback = null; // 点击回调函数
89
90  _currentPaginationContainer = null; // 当前分页容器 元素
91  _currentRenderList = []; // 当前渲染的列表
92
93  constructor(options) {
94    this._totalPages = options.totalPages;
95    this._associatedContainer = options.associatedContainer;
96    this._clickCallback = options.clickCallback;
97  }
98
99  // 初始化分页器
100  initPagination() {
101    // 获取关联容器
102    const associatedContainer = this._associatedContainer;
103    if (!associatedContainer) {
104      throw new Error('The associated container is not found!');
105    }
106    // 获取关联分页容器的一些样式信息
107    const { paginationMarginTop } = associatedContainer.dataset;
108
109    // 创建分页容器
110    this._currentPaginationContainer = document.createElement('div');
111    this._currentPaginationContainer.className = '_pagination_container';
112    Object.assign(this._currentPaginationContainer.style, {
113      margin: '0 auto',
114      marginTop: paginationMarginTop || '20px',
115    });
116
117    // 添加到关联容器
118    associatedContainer.appendChild(this._currentPaginationContainer);
119
120    this._handleRenderList();
121    this._render();
122    // 默认先调用一次
123    this.switchPage(this._currentPage);
124    // 添加 样式
125    const style = document.getElementById('pagination-style');
126    if (!style) {
127      const style = document.createElement('style');
128      style.id = 'pagination-style';
129      style.innerHTML = defaultStyle;
130      document.head.appendChild(style);
131    }
132  }
133
134  // 渲染分页器
135  _render() {
136    // 清空当前分页容器
137    this._currentPaginationContainer.innerHTML = '';
138
139    // 如果是只有一页，不显示分页
140    if (this._totalPages === 1) {
141      return;
142    }
143
144    // 创建后退按钮
145    const back = document.createElement('div');
146    back.className = `_pagination_item p-icon-arrow-left back-icon arrow-icon ${
147      this._currentPage === 1 ? 'disabled' : ''
148    }`;
149
150    back.addEventListener('click', () => {
151      this.switchPage(this._currentPage - 1);
152    });
153    this._currentPaginationContainer.appendChild(back);
154
155    // 创建中间部分分页
156    const els = this._currentRenderList.map((item) => {
157      // 判断是否是 前进或者后退按钮
158      if (item.flag) {
159        return this._createForwardBackward(item);
160      } else {
161        const paginationItem = document.createElement('div');
162        paginationItem.className = `_pagination_item ${item.key === this._currentPage ? 'active' : ''}`;
163        paginationItem.innerHTML = item.label;
164        paginationItem.addEventListener('click', () => {
165          this.switchPage(item.key);
166        });
167        return paginationItem;
168      }
169    });
170    // 添加到分页容器

171    els.forEach((el) => {
172      this._currentPaginationContainer.appendChild(el);
173    });
174
175    // 创建前进按钮
176    const forward = document.createElement('div');
177    forward.className = `_pagination_item p-icon-arrow-left arrow-icon ${
178      this._currentPage === this._totalPages ? 'disabled' : ''
179    }`;
180    forward.addEventListener('click', () => {
181      this.switchPage(this._currentPage + 1);
182    });
183    this._currentPaginationContainer.appendChild(forward);
184  }
185
186  // 处理当前渲染数组
187  _handleRenderList() {
188    let pageStart = this._currentPage - 2;
189    let pageEnd = this._currentPage + 2;
190    if (pageStart < 1) {
191      pageEnd -= pageStart;
192      pageStart = 1;
193    }
194    if (pageEnd > this._totalPages) {
195      pageEnd = this._totalPages;
196    }
197    let result = [];
198    for (let i = pageStart; i <= pageEnd; i++) {
199      result.push({ label: i, key: i });
200    }
201    if (pageStart > 2) {
202      // leftIsHover.this._currentPage = false;
203      const nextPage = this._currentPage - 5 < 1 ? 1 : this._currentPage - 5;
204      result = [
205        { label: 1, key: 1 },
206        {
207          label: '',
208          key: nextPage,
209          flag: 'forward',
210        },
211      ].concat(result);
212    } else if (pageStart === 2) {
213      result = [{ label: 1, key: 1 }].concat(result);
214    }
215    if (pageEnd < this._totalPages - 1) {
216      // rightIsHover.this._currentPage = false;
217      const nextPage = this._currentPage + 5 > this._totalPages ? this._totalPages : this._currentPage + 5;
218
219      result = result.concat([
220        {
221          label: '',
222          key: nextPage,
223          flag: 'back',
224        },
225        { label: this._totalPages, key: this._totalPages },
226      ]);
227    } else if (pageEnd === this._totalPages - 1) {
228      result = result.concat([{ label: this._totalPages, key: this._totalPages }]);
229    }
230    this._currentRenderList = result;
231  }
232
233  // 创建前进后退按钮
234  _createForwardBackward(info) {
235    const { forwardText, backwardText } = this._associatedContainer.dataset;
236    const el = document.createElement('div');
237    el.className = '_pagination_item';
238
239    el.addEventListener('mouseover', () => {
240      const icon = el.querySelector('.icon-default');
241      const hoverIcon = el.querySelector('.icon-hover');
242      const tip = el.querySelector('.tool-tip');
243
244      icon.style.display = 'none';
245      hoverIcon.style.display = 'block';
246      tip.classList.add('tool-tip-show');
247    });
248    el.addEventListener('mouseleave', () => {
249      const icon = el.querySelector('.icon-default');
250      const hoverIcon = el.querySelector('.icon-hover');
251      const tip = el.querySelector('.tool-tip');
252
253      icon.style.display = 'block';
254      hoverIcon.style.display = 'none';
255      tip.classList.remove('tool-tip-show');
256    });
257    el.addEventListener('click', () => {
258      this.switchPage(info.key);
259    });
260    // 创建鼠标未经过icon
261    const icon = document.createElement('i');
262    icon.className = `p-icon-dot-more icon-default`;
263    icon.style.display = 'block';
264    el.appendChild(icon);
265    // 创建鼠标经过icon
266    const hoverIcon = document.createElement('i');
267    hoverIcon.className = `p-icon-${info.flag}-five icon-hover`;
268    hoverIcon.style.display = 'none';
269    el.appendChild(hoverIcon);
270    // 创建 tip 提示
271    const tip = document.createElement('div');
272    tip.className = 'tool-tip';
273    tip.innerHTML = info.flag === 'forward' ? forwardText || 'Forward 5 pages' : backwardText || '5 pages back';
274    el.appendChild(tip);
275
276    return el;
277  }
278
279  // 切换分页
280  switchPage(val) {
281    this._currentPage = val;
282    // to do
283    this._handleRenderList();
284    this._render();
285
286    // 处理关联的分页容器
287    this._clickCallback && this._clickCallback(val);
288  }
289}
290
291// export class