Bootstrap分页

介绍

Bootstrap分页组件提供了一种可方便地分割长列表或数据集的方式。通过分页，用户可以快速地导航到所需页面，因而可以更方便地查看和使用数据。

Bootstrap分页有以下特点：

• 个性化定制：可以自定义分页组件的一些属性，如样式、文本等。
• 交互性：支持通过JavaScript的方式，实现点击分页按钮后的页面刷新效果。
• 响应式设计：在不同尺寸的设备上，分页组件会做出不同的适应性响应。

使用

基本用法

<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</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="#">Next</a>
    </li>
  </ul>
</nav>

以上代码实现了一个简单的分页组件。

• .pagination：代表分页组件的整个容器。

• .page-item：代表每一个分页按钮。可以根据需要，添加disabled、active等class来让分页按钮表现不同的状态。

• .page-link：分页按钮的链接地址。

在实现一个分页组件时，除了以上介绍的基本用法，我们还可以针对不同的场景、需求，进行多样化的个性化定制。下面，我们简要介绍一些相关属性、方法。

属性

disabled

该属性可以在分页按钮上添加.disabled样式，表示该按钮当前的状态不可用。

<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</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="#">Next</a>
    </li>
  </ul>
</nav>

active

该属性可以在分页按钮上添加.active样式，表示该按钮当前所在的页面。

<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item active" aria-current="page">
      <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="#">Next</a>
    </li>
  </ul>
</nav>

方法

.prev(), .next()

通过JavaScript的方式，调用这两个方法，可以实现自动向前、向后翻页的效果。

$('.pagination').on('click', '.page-link', function(e){
  e.preventDefault();
  $(this).addClass('active');
  $(this).parent().siblings('.active').children('.page-link').removeClass('active');
});

$('.pagination').prev();

完成以上操作后，页面将自动跳转到上一页。

总结

Bootstrap分页是一个非常实用、灵活的组件。通过丰富的自定义功能，可以轻松地支持不同需求、场景下的分页效果。此外，Bootstrap分页还提供了非常方便的JavaScript API，可以让开发者轻松完成复杂的分页逻辑实现。