分页组件 - Javascript

分页组件是Web开发中常用的一个组件，它能够将大量数据分页展示，提升用户的交互体验。

组件结构

一个分页组件通常包含以下几个部分：

1. 上一页按钮
2. 下一页按钮
3. 当前页码
4. 总页码数
5. 可选的页面跳转输入框和按钮

设计要点

在设计分页组件时需要注意以下几点：

1. 首先需要计算总页码数，根据页码数和每页显示条目数量来确定数据的起始和结束位置。
2. 在页面加载时需要默认展示第一页的数据。
3. 点击上一页和下一页按钮时需要更新相应的数据。
4. 如果页面很长，需要提供一个滚动到顶部或底部的按钮方便用户使用。
5. 可以添加搜索功能，在搜索结果页面也可以使用分页组件展示数据。

代码实现

下面是一个简单的分页组件的Javascript代码实现:

class Pagination {
  constructor(container, totalPages, currentPage, onChangePage) {
    this.container = container;
    this.totalPages = totalPages;
    this.currentPage = currentPage;
    this.onChangePage = onChangePage;
    this.init();
  }

  init() {
    this.container.innerHTML = this.render();
    this.attachEvents();
  }

  render() {
    const prevBtn = this.currentPage > 1 ? `<button class="prev-btn">&lt;</button>` : '';
    const nextBtn = this.currentPage < this.totalPages ? `<button class="next-btn">&gt;</button>` : '';
    const pageInput = `<input type="text" value="${this.currentPage}" />`;
    const pageGotoBtn = `<button class="go-btn">Go</button>`;
    return `
      <div class="pagination">
        ${prevBtn}
        ${pageInput}
        / ${this.totalPages} ${pageGotoBtn}
        ${nextBtn}
      </div>
    `;
  }

  attachEvents() {
    const prevBtn = this.container.querySelector('.prev-btn');
    const nextBtn = this.container.querySelector('.next-btn');
    const pageInput = this.container.querySelector('input[type="text"]');
    const goBtn = this.container.querySelector('.go-btn');

    prevBtn?.addEventListener('click', this.prevPage.bind(this));
    nextBtn?.addEventListener('click', this.nextPage.bind(this));
    pageInput?.addEventListener('input', this.changePage.bind(this));
    goBtn?.addEventListener('click', this.goPage.bind(this));
  }

  prevPage() {
    this.currentPage--;
    this.onChangePage(this.currentPage);
    this.init();
  }

  nextPage() {
    this.currentPage++;
    this.onChangePage(this.currentPage);
    this.init();
  }

  changePage(e) {
    const newPage = parseInt(e.target.value);
    if (newPage > 0 && newPage <= this.totalPages) {
      this.currentPage = newPage;
    }
  }

  goPage() {
    this.onChangePage(this.currentPage);
    this.init();
  }
}

使用示例

const container = document.querySelector('.container');
const totalPages = 10;
let currentPage = 1;

function onChangePage(page) {
  currentPage = page;
  // 更新数据
}

const pagination = new Pagination(container, totalPages, currentPage, onChangePage);

Markdown代码片段

# 分页组件 - Javascript

分页组件是Web开发中常用的一个组件，它能够将大量数据分页展示，提升用户的交互体验。

## 组件结构

一个分页组件通常包含以下几个部分：

1. 上一页按钮
2. 下一页按钮
3. 当前页码
4. 总页码数
5. 可选的页面跳转输入框和按钮

## 设计要点

在设计分页组件时需要注意以下几点：

1. 首先需要计算总页码数，根据页码数和每页显示条目数量来确定数据的起始和结束位置。
2. 在页面加载时需要默认展示第一页的数据。
3. 点击上一页和下一页按钮时需要更新相应的数据。
4. 如果页面很长，需要提供一个滚动到顶部或底部的按钮方便用户使用。
5. 可以添加搜索功能，在搜索结果页面也可以使用分页组件展示数据。

## 代码实现

下面是一个简单的分页组件的Javascript代码实现：

```javascript
class Pagination {
  constructor(container, totalPages, currentPage, onChangePage) {
    this.container = container;
    this.totalPages = totalPages;
    this.currentPage = currentPage;
    this.onChangePage = onChangePage;
    this.init();
  }

  init() {
    this.container.innerHTML = this.render();
    this.attachEvents();
  }

  render() {
    const prevBtn = this.currentPage > 1 ? `<button class="prev-btn">&lt;</button>` : '';
    const nextBtn = this.currentPage < this.totalPages ? `<button class="next-btn">&gt;</button>` : '';
    const pageInput = `<input type="text" value="${this.currentPage}" />`;
    const pageGotoBtn = `<button class="go-btn">Go</button>`;
    return `
      <div class="pagination">
        ${prevBtn}
        ${pageInput}
        / ${this.totalPages} ${pageGotoBtn}
        ${nextBtn}
      </div>
    `;
  }

  attachEvents() {
    const prevBtn = this.container.querySelector('.prev-btn');
    const nextBtn = this.container.querySelector('.next-btn');
    const pageInput = this.container.querySelector('input[type="text"]');
    const goBtn = this.container.querySelector('.go-btn');

    prevBtn?.addEventListener('click', this.prevPage.bind(this));
    nextBtn?.addEventListener('click', this.nextPage.bind(this));
    pageInput?.addEventListener('input', this.changePage.bind(this));
    goBtn?.addEventListener('click', this.goPage.bind(this));
  }

  prevPage() {
    this.currentPage--;
    this.onChangePage(this.currentPage);
    this.init();
  }

  nextPage() {
    this.currentPage++;
    this.onChangePage(this.currentPage);
    this.init();
  }

  changePage(e) {
    const newPage = parseInt(e.target.value);
    if (newPage > 0 && newPage <= this.totalPages) {
      this.currentPage = newPage;
    }
  }

  goPage() {
    this.onChangePage(this.currentPage);
    this.init();
  }
}
```

## 使用示例

```javascript
const container = document.querySelector('.container');
const totalPages = 10;
let currentPage = 1;

function onChangePage(page) {
  currentPage = page;
  // 更新数据
}

const pagination = new Pagination(container, totalPages, currentPage, onChangePage);