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/zh-tw/n/293704.html

JS分頁代碼實例詳解

一、實現原理

二、實現方法

三、實現效果

總結

相關推薦

發表回復