写一个前端的分页组件,它能选择跳转的页数,它可供选择的页数为6页,超过6页的中间加省略号
时间: 2024-05-01 16:21:11 浏览: 27
下面是一个简单的前端分页组件,它可以选择跳转的页数,当页数大于6页时,中间会加上省略号。
```html
<div class="pagination">
<ul>
<li class="prev-page">上一页</li>
<li class="page active">1</li>
<li class="page">2</li>
<li class="page">3</li>
<li class="page">4</li>
<li class="page">5</li>
<li class="page">6</li>
<li class="ellipsis">...</li>
<li class="page">10</li>
<li class="next-page">下一页</li>
</ul>
</div>
```
```css
.pagination {
display: flex;
justify-content: center;
align-items: center;
}
.pagination ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.pagination li {
display: inline-block;
margin: 0 5px;
font-size: 14px;
cursor: pointer;
}
.pagination li.active {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.pagination li:hover:not(.active) {
color: #007bff;
border-color: #007bff;
}
.pagination li.ellipsis {
margin: 0 10px;
}
.pagination li.disabled {
pointer-events: none;
color: #6c757d;
background-color: #fff;
border-color: #6c757d;
}
```
```javascript
class Pagination {
constructor(container, options) {
this.container = container;
this.options = Object.assign(
{
currentPage: 1,
totalPage: 10,
visiblePages: 6,
onPageChange: () => {},
},
options
);
this.render();
}
render() {
const { currentPage, totalPage, visiblePages } = this.options;
const startPage = Math.max(currentPage - Math.floor(visiblePages / 2), 1);
const endPage = Math.min(startPage + visiblePages - 1, totalPage);
const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
const prevPage = currentPage > 1 ? currentPage - 1 : null;
const nextPage = currentPage < totalPage ? currentPage + 1 : null;
const html = `
<ul>
<li class="prev-page ${prevPage ? '' : 'disabled'}">${prevPage ? '上一页' : ''}</li>
${pages
.map(
(page) => `
<li class="page ${page === currentPage ? 'active' : ''}" data-page="${page}">${page}</li>
`
)
.join('')}
${endPage < totalPage ? '<li class="ellipsis">...</li>' : ''}
${endPage < totalPage ? `<li class="page" data-page="${totalPage}">${totalPage}</li>` : ''}
<li class="next-page ${nextPage ? '' : 'disabled'}">${nextPage ? '下一页' : ''}</li>
</ul>
`;
this.container.innerHTML = html;
this.bindEvents();
}
bindEvents() {
const { onPageChange } = this.options;
this.container.querySelectorAll('.page').forEach((page) => {
page.addEventListener('click', () => {
const newPage = parseInt(page.dataset.page);
this.options.currentPage = newPage;
this.render();
onPageChange(newPage);
});
});
this.container.querySelector('.prev-page').addEventListener('click', () => {
if (this.options.currentPage > 1) {
this.options.currentPage--;
this.render();
onPageChange(this.options.currentPage);
}
});
this.container.querySelector('.next-page').addEventListener('click', () => {
if (this.options.currentPage < this.options.totalPage) {
this.options.currentPage++;
this.render();
onPageChange(this.options.currentPage);
}
});
}
}
const container = document.querySelector('.pagination');
new Pagination(container, {
currentPage: 1,
totalPage: 10,
visiblePages: 6,
onPageChange: (page) => {
console.log(`跳转到第 ${page} 页`);
},
});
```
在使用时,只需要将容器元素传入 `Pagination` 类的构造函数,并传入相应的配置项即可。
```html
<div class="pagination"></div>
```
```javascript
const container = document.querySelector('.pagination');
new Pagination(container, {
currentPage: 1,
totalPage: 10,
visiblePages: 6,
onPageChange: (page) => {
console.log(`跳转到第 ${page} 页`);
},
});
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)