1.定义全局的简易分页组件 2.如果当前是第一页的时候,“上一页”按钮不显示,总共是 15 页内容, 当页数为 15 页时候,“下一页”按钮不显示。 3、当点击“上一页”按钮或者“下一页”按钮的时候可以实现去到上一页 或者下一页的效果
时间: 2023-09-12 15:09:48 浏览: 40
以下是一个简易的分页组件的代码实现,可以根据需要进行调整:
HTML:
```html
<div class="pagination">
<button class="prev-page">上一页</button>
<ul class="page-list"></ul>
<button class="next-page">下一页</button>
</div>
```
CSS:
```css
.pagination {
display: flex;
justify-content: center;
align-items: center;
}
.pagination button {
margin: 0 10px;
}
.pagination .prev-page {
display: none;
}
.pagination .next-page {
display: none;
}
.pagination .page-list {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.pagination .page-list li {
cursor: pointer;
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ccc;
}
.pagination .page-list li.active {
background: #ccc;
}
```
JS:
```javascript
// 分页组件
function Pagination(options) {
this.currentPage = options.currentPage || 1; // 当前页数
this.totalPages = options.totalPages || 1; // 总页数
this.pageList = options.pageList || []; // 页码列表
this.prevBtn = options.prevBtn || null; // 上一页按钮
this.nextBtn = options.nextBtn || null; // 下一页按钮
this.pageContainer = options.pageContainer || null; // 页码容器
this.onClick = options.onClick || function () {}; // 点击事件回调函数
// 渲染页码列表
this.renderPageList = function () {
var html = '';
// 如果总页数小于等于 15,直接渲染全部页码
if (this.totalPages <= 15) {
for (var i = 1; i <= this.totalPages; i++) {
html += '<li class="' + (i === this.currentPage ? 'active' : '') + '">' + i + '</li>';
}
} else {
// 如果当前页数小于等于 8,渲染前 15 页
if (this.currentPage <= 8) {
for (var i = 1; i <= 15; i++) {
html += '<li class="' + (i === this.currentPage ? 'active' : '') + '">' + i + '</li>';
}
html += '<li>...</li><li>' + this.totalPages + '</li>';
}
// 如果当前页数大于总页数减 7,渲染后 15 页
else if (this.currentPage >= this.totalPages - 7) {
html += '<li>1</li><li>...</li>';
for (var i = this.totalPages - 14; i <= this.totalPages; i++) {
html += '<li class="' + (i === this.currentPage ? 'active' : '') + '">' + i + '</li>';
}
}
// 否则渲染中间的 15 页
else {
html += '<li>1</li><li>...</li>';
for (var i = this.currentPage - 7; i <= this.currentPage + 7; i++) {
html += '<li class="' + (i === this.currentPage ? 'active' : '') + '">' + i + '</li>';
}
html += '<li>...</li><li>' + this.totalPages + '</li>';
}
}
// 渲染页码列表
this.pageContainer.innerHTML = html;
};
// 渲染分页组件
this.render = function () {
// 如果当前页数为 1,隐藏上一页按钮
if (this.currentPage === 1) {
this.prevBtn.style.display = 'none';
} else {
this.prevBtn.style.display = 'inline-block';
}
// 如果当前页数为总页数,隐藏下一页按钮
if (this.currentPage === this.totalPages) {
this.nextBtn.style.display = 'none';
} else {
this.nextBtn.style.display = 'inline-block';
}
// 渲染页码列表
this.renderPageList();
// 绑定点击事件
var pageList = this.pageContainer.querySelectorAll('li');
for (var i = 0; i < pageList.length; i++) {
pageList[i].addEventListener('click', function (e) {
var page = parseInt(e.target.innerHTML);
if (page === this.currentPage) return;
this.currentPage = page;
this.render();
this.onClick(this.currentPage);
}.bind(this));
}
// 绑定上一页按钮点击事件
this.prevBtn.addEventListener('click', function () {
if (this.currentPage === 1) return;
this.currentPage--;
this.render();
this.onClick(this.currentPage);
}.bind(this));
// 绑定下一页按钮点击事件
this.nextBtn.addEventListener('click', function () {
if (this.currentPage === this.totalPages) return;
this.currentPage++;
this.render();
this.onClick(this.currentPage);
}.bind(this));
};
// 初始化分页组件
this.init = function () {
this.render();
};
}
```
使用方法:
```javascript
var pagination = new Pagination({
currentPage: 1,
totalPages: 15,
prevBtn: document.querySelector('.prev-page'),
nextBtn: document.querySelector('.next-page'),
pageContainer: document.querySelector('.page-list'),
onClick: function (page) {
console.log(page);
}
});
pagination.init();
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)