分頁控件詳解

分頁控件是一個非常常見的網頁控件，很多網站都使用它來讓用戶方便瀏覽大量數據。在本文中，我們將從各個方面來詳細闡述分頁控件的使用與實現。

一、基本概念

分頁控件，顧名思義就是將數據進行分頁展示的一種控件。簡單來說，就是將數據按照一頁一頁展示，而不是一次性將所有數據展示出來。它可以讓用戶更加方便地查看和瀏覽數據，同時也可以降低頁面的加載壓力。

通常情況下，分頁控件會展示以下幾個基本元素：

• 總頁數
• 當前頁碼
• 每頁數據量
• 上一頁、下一頁按鈕
• 跳轉到指定頁碼的輸入框和按鈕

代碼展示

<div class="pagination">
  <span class="pagination-total">共100頁</span>
  <a href="#" class="pagination-btn prev"></a>
  <span class="pagination-current">1/100</span>
  <a href="#" class="pagination-btn next"></a>
  <span class="pagination-page-size">每頁10條</span>
  <span class="pagination-jump">
    跳轉到
    <input type="text" class="pagination-jump-input">
    <a href="#" class="pagination-jump-btn">Go</a>
  </span>
</div>

二、功能實現

1、計算總頁數

計算總頁數是分頁控件最基本的功能之一。一般情況下，我們會將數據量和每頁數據量作為參數傳入分頁控件，控件根據這些參數來計算總頁數。

計算總頁數的公式是：總頁數 = ceil(數據量 ÷ 每頁數據量)

/**
 * 計算總頁數
 * @param {Number} total 數據總量
 * @param {Number} pageSize 每頁數據量
 * @return {Number} 總頁數
 */
function getTotalPage(total, pageSize) {
  return Math.ceil(total / pageSize);
}

2、渲染分頁控件

渲染分頁控件是將每個元素生成對應的 HTML 結構，並添加到頁面上。

/**
 * 渲染分頁控件
 * @param {Number} currentPage 當前頁碼
 * @param {Number} totalPage 總頁數
 * @param {Number} pageSize 每頁數據量
 * @param {Function} onPageChange 當翻頁時觸發的回調函數
 */
function renderPagination(currentPage, totalPage, pageSize, onPageChange) {
  const pagination = document.createElement('div');
  pagination.classList.add('pagination');

  const total = document.createElement('span');
  total.classList.add('pagination-total');
  total.innerText = `共${totalPage}頁`;
  pagination.appendChild(total);

  const prev = document.createElement('a');
  prev.classList.add('pagination-btn', 'prev');
  prev.href = '#';
  pagination.appendChild(prev);

  const current = document.createElement('span');
  current.classList.add('pagination-current');
  current.innerText = `${currentPage}/${totalPage}`;
  pagination.appendChild(current);

  const next = document.createElement('a');
  next.classList.add('pagination-btn', 'next');
  next.href = '#';
  pagination.appendChild(next);

  const page_size = document.createElement('span');
  page_size.classList.add('pagination-page-size');
  page_size.innerText = `每頁${pageSize}條`;
  pagination.appendChild(page_size);

  const jump = document.createElement('span');
  jump.classList.add('pagination-jump');
  jump.innerHTML = `
    跳轉到
    
    Go
  `;
  pagination.appendChild(jump);

  document.body.appendChild(pagination);

  // 綁定事件
  prev.addEventListener('click', e => {
    e.preventDefault();
    if (currentPage > 1) {
      onPageChange(currentPage - 1);
    }
  });

  next.addEventListener('click', e => {
    e.preventDefault();
    if (currentPage  {
    const page = jump.querySelector('.pagination-jump-input').value;
    if (page && /^\d+$/.test(page) && page >= 1 && page <= totalPage) {
      onPageChange(parseInt(page));
    }
    e.preventDefault();
  });
}

3、數據分頁

數據分頁是將原始數據按照每頁數據量進行切分，返回指定頁碼的數據。

/**
 * 數據分頁
 * @param {Array} data 原始數據
 * @param {Number} currentPage 當前頁碼
 * @param {Number} pageSize 每頁數據量
 * @return {Array} 分頁後的數據
 */
function paginate(data, currentPage, pageSize) {
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize - 1;
  return data.slice(startIndex, endIndex + 1);
}

三、實戰演練

接下來，讓我們使用上述代碼實現一個簡單的分頁控件，並應用到一個博客文章列表中。

1、HTML 結構

假設數據來自一個 AJAX 請求，我們需要首先渲染一個博客文章列表的 HTML 結構，再在其中嵌入分頁控件。

<div class="blog">
  <ul class="article-list">
    <li>
      <h3><a href="#">文章標題</a></h3>
      <p>文章摘要...</p>
    </li>
    <li>...</li>
    <li>...</li>
  </ul>

  <!-- 分頁控件將嵌入此處 -->
</div>

2、JavaScript 代碼

接下來，我們將使用上述函數來實現一個完整的分頁控件，並將其渲染到博客文章列表中。

function loadBlogArticles(page = 1, pageSize = 10) {
  fetch(`/api/articles?page=${page}&pageSize=${pageSize}`)
    .then(response => response.json())
    .then(data => {
      const articles = document.querySelector('.blog .article-list');
      articles.innerHTML = '';

      data.forEach(article => {
        const li = document.createElement('li');
        li.innerHTML = `
          
${article.title}
          
${article.summary}
        `;
        articles.appendChild(li);
      });

      const totalPage = getTotalPage(data.totalCount, pageSize);
      renderPagination(page, totalPage, pageSize, page => {
        loadBlogArticles(page, pageSize);
      });
    });
}

loadBlogArticles();

四、總結

本文我們詳細闡述了分頁控件的基本概念、功能實現和實戰演練。希望本文可以幫助讀者更好地理解和使用分頁控件。