JavaScript制作简单分页插件

下面是关于“JavaScript制作简单分页插件”的完整攻略：

下面是关于“JavaScript制作简单分页插件”的完整攻略：

一、制作思路

1. 首先，需要通过 JavaScript 获取到要分页显示的数据。一般情况下，分页的数据都是从后台数据库中获取的，通过 AJAX 等技术获取并显示在前端页面上。

2. 接着，需要计算出总的页数。通常是根据数据总数和每页显示的数据条数进行计算得出，比如，总数为 100 条，每页显示 10 条，则总共有 10 页。

3. 然后，需要为页面添加一个分页的 HTML 容器，用来显示分页按钮和当前页数等信息。

4. 然后，需要编写 JavaScript 代码，根据当前页码和总页数，生成对应数量的分页按钮，并为每个按钮添加点击事件，点击按钮后切换到对应的分页。

5. 最后，根据当前页码和每页显示的数据条数，从所有数据中截取出对应的数据，用来渲染当前页的内容。

二、代码实现

1. 首先，需要在 HTML 中添加一个分页容器：

<div id="pagination"></div>

1. 然后，在 JavaScript 中定义一个名为 Pagination 的类：

class Pagination {
  constructor(data, pageSize) {
    this.data = data; // 所有数据
    this.pageSize = pageSize; // 每页显示数量
    this.currentPage = 1; // 当前页码
    this.totalPage = Math.ceil(this.data.length / this.pageSize); // 总页数
    this.pagination = document.getElementById('pagination'); // 分页容器
  }

  // TODO：实现生成分页按钮的方法
  render() {}

  // TODO：实现切换分页的方法
  changePage() {}

  // TODO：实现渲染当前页数据的方法
  renderContent() {}
}

1. 然后，在 Pagination 中实现生成分页按钮的方法（通过循环生成每个按钮，并为每个按钮添加点击事件）：

render() {
  let html = '';
  for (let i = 1; i <= this.totalPage; i++) {
    html += `<button data-page="${i}">${i}</button>`;
  }
  this.pagination.innerHTML = html;

  this.pagination.addEventListener('click', e => {
    if (e.target.tagName === 'BUTTON') {
      this.currentPage = +e.target.dataset.page;
      this.changePage();
    }
  });
}

1. 接着，在 Pagination 中实现切换分页的方法（通过计算当前页对应的数据索引，从所有数据中截取出对应的数据，并调用 renderContent() 方法渲染）：

changePage() {
  const start = (this.currentPage - 1) * this.pageSize;
  const end = start + this.pageSize;
  const currentPageData = this.data.slice(start, end);
  this.renderContent(currentPageData);
}

1. 最后，在 Pagination 中实现渲染当前页数据的方法（通过循环生成 HTML 代码，并插入到页面中）：

renderContent(data) {
  let html = '';
  data.forEach(item => {
    html += `<div>${item.title}</div>`;
  });
  document.getElementById('content').innerHTML = html;
}

1. 最后，在 JavaScript 中调用 Pagination 类，并传入相应的参数，然后调用 render() 方法开始渲染分页：

const data = [
  { title: '1' },
  { title: '2' },
  { title: '3' },
  { title: '4' },
  { title: '5' },
  { title: '6' },
  { title: '7' },
  { title: '8' },
  { title: '9' },
  { title: '10' },
  { title: '11' },
  { title: '12' },
  { title: '13' },
  { title: '14' },
  { title: '15' },
  { title: '16' },
];

const pagination = new Pagination(data, 5);
pagination.render();

三、示例说明

示例一

现有一个数据数组如下所示：

const data = [
  { title: '1' },
  { title: '2' },
  { title: '3' },
  { title: '4' },
  { title: '5' },
  { title: '6' },
  { title: '7' },
  { title: '8' },
  { title: '9' },
  { title: '10' },
  { title: '11' },
  { title: '12' },
  { title: '13' },
  { title: '14' },
  { title: '15' },
  { title: '16' },
];

要求每页显示 5 条数据，然后使用上述代码实现分页。

结果：显示16条数据，分成了3个页面。

示例二

现有一个数据数组如下所示：

const data = [
  { title: 'A' },
  { title: 'B' },
  { title: 'C' },
  { title: 'D' },
];

要求每页显示 3 条数据，然后使用上述代码实现分页。

结果：显示4条数据，分成了2个页面。