Bootstrap 5 分页组件

基础分页

使用.pagination和.page-item、.page-link类创建基础分页组件。

基础分页示例

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
  </ul>
</nav>

使用图标的分页

在分页组件中使用图标代替文字，提供更直观的导航体验。

带图标的分页示例

1
2
3

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

禁用和激活状态

使用.disabled和.active类来表示分页项的禁用和激活状态。

禁用和激活状态示例

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
    </li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">下一页</a>
    </li>
  </ul>
</nav>

分页尺寸

使用.pagination-lg或.pagination-sm类调整分页组件的尺寸。

不同尺寸的分页示例

<!-- 大尺寸分页 -->
<nav aria-label="Large pagination example">
  <ul class="pagination pagination-lg">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<!-- 默认尺寸分页 -->
<nav aria-label="Standard pagination example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<!-- 小尺寸分页 -->
<nav aria-label="Small pagination example">
  <ul class="pagination pagination-sm">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

分页对齐

使用Flexbox工具类调整分页组件的对齐方式。

不同对齐方式的分页示例

<!-- 左对齐 -->
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-start">
    <!-- 分页项 -->
  </ul>
</nav>

<!-- 居中对齐 -->
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <!-- 分页项 -->
  </ul>
</nav>

<!-- 右对齐 -->
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <!-- 分页项 -->
  </ul>
</nav>

自定义样式

通过添加自定义CSS类来创建具有独特风格的分页组件。

自定义样式分页示例

1
2
3
4
5

<!-- HTML -->
<nav aria-label="Page navigation example">
  <ul class="pagination custom-pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

<!-- CSS -->
<style>
.custom-pagination .page-link {
    color: #6f42c1;
}

.custom-pagination .page-item.active .page-link {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: white;
}
</style>

完整示例

一个完整的分页示例，结合表格数据展示分页功能。

带分页的数据表格

ID	姓名	邮箱	角色

显示 1-5 条，共 25 条

// JavaScript 分页逻辑示例
const itemsPerPage = 5;
let currentPage = 1;
const totalItems = 25; // 模拟数据总数

function renderTable(page) {
    // 清空表格
    const tableBody = document.getElementById('userTableBody');
    tableBody.innerHTML = '';

    // 计算起始和结束索引
    const startIndex = (page - 1) * itemsPerPage;
    const endIndex = Math.min(startIndex + itemsPerPage, totalItems);

    // 更新显示信息
    document.getElementById('startItem').textContent = startIndex + 1;
    document.getElementById('endItem').textContent = endIndex;
    document.getElementById('totalItems').textContent = totalItems;

    // 生成表格行
    for (let i = startIndex; i < endIndex; i++) {
        const row = document.createElement('tr');
        row.innerHTML = `
            ${i + 1}
            用户 ${i + 1}
            user${i + 1}@example.com
            ${i % 3 === 0 ? '管理员' : '普通用户'}
        `;
        tableBody.appendChild(row);
    }

    // 渲染分页
    renderPagination();
}

function renderPagination() {
    const pagination = document.getElementById('dataPagination');
    pagination.innerHTML = '';

    const totalPages = Math.ceil(totalItems / itemsPerPage);

    // 添加上一页按钮
    const prevLi = document.createElement('li');
    prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
    prevLi.innerHTML = `上一页`;
    pagination.appendChild(prevLi);

    // 添加页码按钮
    for (let i = 1; i <= totalPages; i++) {
        const pageLi = document.createElement('li');
        pageLi.className = `page-item ${currentPage === i ? 'active' : ''}`;
        pageLi.innerHTML = `${i}`;
        pagination.appendChild(pageLi);
    }

    // 添加下一页按钮
    const nextLi = document.createElement('li');
    nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
    nextLi.innerHTML = `下一页`;
    pagination.appendChild(nextLi);

    // 添加分页点击事件
    pagination.querySelectorAll('.page-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const page = parseInt(this.getAttribute('data-page'));
            if (page && page !== currentPage && page >= 1 && page <= totalPages) {
                currentPage = page;
                renderTable(currentPage);
            }
        });
    });
}

// 初始化
renderTable(currentPage);

Bootstrap5教程

Bootstrap5 分页组件