JS分页实现详解

分页是Web开发中常见的功能，因为它可以帮助用户更好地浏览大量数据。JS分页是其中的一种实现方式，它通过JavaScript代码对数据进行分页处理，再通过DOM操作将分页后的数据呈现在页面上。

一、实现原理

JS分页的实现原理很简单，主要分为以下几个步骤：

获取数据。

const data = [
  { name: '张三', age: 25, gender: '男' },
  { name: '李四', age: 30, gender: '女' },
  { name: '王五', age: 28, gender: '男' },
  { name: '赵六', age: 32, gender: '女' }
  // ... 更多数据
];

计算总页数。

const pageSize = 3; // 每页显示3条数据
const total = data.length; // 数据总条数
const totalPages = Math.ceil(total / pageSize); // 总页数

生成分页器。

const pager = document.querySelector('#pager');
for (let i = 1; i <= totalPages; i++) {
  const button = document.createElement('button');
  button.innerHTML = i;
  pager.appendChild(button);
}

根据当前页数显示数据。

function showData(pageNo) {
  const startIndex = (pageNo - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  const pageData = data.slice(startIndex, endIndex);
  // 根据需求将数据呈现在页面上
}

监听分页器按钮的点击事件，更新当前页数并显示对应的数据。

pager.addEventListener('click', function (event) {
  if (event.target.tagName === 'BUTTON') {
    const pageNo = parseInt(event.target.innerHTML);
    showData(pageNo);
  }
});

二、实现方法

我们可以将上述原理，利用函数和对象的封装，封装成JS分页代码。以下是一种常见的实现方法。

function Pagination(selector, options) {
  this.container = document.querySelector(selector);
  this.current = options.current || 1;
  this.pageSize = options.pageSize || 10;
  this.total = options.total || 0;
  this.totalPages = Math.ceil(this.total / this.pageSize);
  this.onPageChange = options.onPageChange || function () {};
  this.init = function () {
    this.container.innerHTML = '';
    const prevButton = document.createElement('button');
    prevButton.innerHTML = '上一页';
    prevButton.disabled = this.current === 1;
    this.container.appendChild(prevButton);
    const pager = document.createElement('div');
    pager.className = 'pager';
    for (let i = 1; i <= this.totalPages; i++) {
      const button = document.createElement('button');
      button.innerHTML = i;
      button.className = i === this.current ? 'active' : '';
      pager.appendChild(button);
    }
    this.container.appendChild(pager);
    const nextButton = document.createElement('button');
    nextButton.innerHTML = '下一页';
    nextButton.disabled = this.current === this.totalPages;
    this.container.appendChild(nextButton);
    prevButton.addEventListener('click', () => {
      if (this.current > 1) {
        this.current--;
        this.render();
        this.onPageChange(this.current);
      }
    });
    nextButton.addEventListener('click', () => {
      if (this.current < this.totalPages) {
        this.current++;
        this.render();
        this.onPageChange(this.current);
      }
    });
    pager.addEventListener('click', (event) => {
      if (event.target.tagName === 'BUTTON') {
        const pageNo = parseInt(event.target.innerHTML);
        if (pageNo !== this.current) {
          this.current = pageNo;
          this.render();
          this.onPageChange(this.current);
        }
      }
    });
  };
  this.render = function () {
    const pager = this.container.querySelector('.pager');
    for (let i = 0; i < pager.children.length; i++) {
      const button = pager.children[i];
      button.className = button.innerHTML === '' + this.current ? 'active' : '';
    }
    pager.previousElementSibling.disabled = this.current === 1;
    pager.nextElementSibling.disabled = this.current === this.totalPages;
  };
  this.init();
}
// 使用示例：
const pager = new Pagination('#pager', {
  current: 1,
  pageSize: 3,
  total: 10,
  onPageChange: (pageNo) => {
    console.log('当前页数为：' + pageNo);
  }
});

代码中，我们通过实现一个 Pagination 对象，将分页的各项操作封装了起来。它接受两个参数，分别是选择器 selector 和配置对象 options。options 中包含四个属性，分别是当前页数 current、每页数据量 pageSize、数据总条数 total 和分页器按钮被点击时的回调函数 onPageChange。Pagination 对象同时拥有两个方法，init 方法用于生成分页器，render 方法用于更新分页器状态。

三、实现效果

最后，我们来看看JS分页的实现效果。以下是一个简单的例子，演示分页器的生成和数据的显示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>JS分页代码实例</title>
  <style>
    #pager {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    button {
      margin-right: 5px;
    }
    button.active {
      background-color: #337ab7;
      color: white;
    }
    .data {
      display: none;
    }
    .data.active {
      display: block;
    }
    table {
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    th,
    td {
      padding: 10px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div id="pager"></div>
  <div class="data">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <script>
    const data = [
      { name: '张三', age: 25, gender: '男' },
      { name: '李四', age: 30, gender: '女' },
      { name: '王五', age: 28, gender: '男' },
      { name: '赵六', age: 32, gender: '女' },
      { name: '钱七', age: 29, gender: '男' },
      { name: '孙八', age: 26, gender: '女' },
      { name: '周九', age: 31, gender: '男' },
      { name: '吴十', age: 27, gender: '女' }
    ];
    const pager = new Pagination('#pager', {
      current: 1,
      pageSize: 3,
      total: data.length,
      onPageChange: (pageNo) => {
        showData(pageNo);
      }
    });
    function showData(pageNo) {
      const startIndex = (pageNo - 1) * pager.pageSize;
      const endIndex = startIndex + pager.pageSize;
      const pageData = data.slice(startIndex, endIndex);
      const tbody = document.querySelector('.data table tbody');
      tbody.innerHTML = '';
      for (let i = 0; i < pageData.length; i++) {
        const tr = document.createElement('tr');
        const td1 = document.createElement('td');
        td1.innerHTML = pageData[i].name;
        tr.appendChild(td1);
        const td2 = document.createElement('td');
        td2.innerHTML = pageData[i].age;
        tr.appendChild(td2);
        const td3 = document.createElement('td');
        td3.innerHTML = pageData[i].gender;
        tr.appendChild(td3);
        tbody.appendChild(tr);
      }
      document.querySelector('.data').classList.add('active');
    }
    showData(pager.current);
  </script>
</body>
</html>

在浏览器中打开上述代码，即可看到一个实现了数据分页展示的页面。

总结

JS分页是Web开发中常用的数据分页展示方式，它可以帮助用户更好地浏览大量数据。我们可以通过简单的JavaScript代码，实现分页的各项功能，包括数据获取、总页数计算、分页器生成和当前页数据显示等。同时，我们也可以通过对象和函数的封装，将分页的各项功能进行统一封装，并实现可配置的分页器。

JS分页代码实例详解

JS分页实现详解

一、实现原理

二、实现方法

三、实现效果

总结