JS分页代码实例详解

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

一、实现原理

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

1、获取数据。


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

2、计算总页数。


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

3、生成分页器。


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

4、根据当前页数显示数据。


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

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


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  {
      if (this.current > 1) {
        this.current--;
        this.render();
        this.onPageChange(this.current);
      }
    });

    nextButton.addEventListener('click', () => {
      if (this.current  {
      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  {
    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代码，实现分页的各项功能，包括数据获取、总页数计算、分页器生成和当前页数据显示等。同时，我们也可以通过对象和函数的封装，将分页的各项功能进行统一封装，并实现可配置的分页器。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/293704.html

JS分页代码实例详解

一、实现原理

二、实现方法

三、实现效果

总结

相关推荐

发表回复