Bootstrap实现翻页效果

大致步骤如下：

1. 引入Bootstrap库

在头部引入Bootstrap的css和js文件

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

2. 构建分页组件

用Bootstrap提供的分页组件和相应的类名来构建分页功能。

<nav aria-label="Page navigation">
  <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 active"><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>

其中active类用于标识当前页码，通过改变active类可以实现翻页效果。

3. 实现翻页效果

通过点击上一页和下一页按钮，改变分页组件中的active类名，从而实现翻页效果。

$(function(){
  $('.pagination').on('click', 'a', function() {
    var $this = $(this);
    if (!$this.parent().hasClass('active')) {
      var pageIndex = parseInt($this.text());
      $('.pagination li').removeClass('active');
      $this.closest('li').addClass('active');
      // 跳转到相应的页面
      // ...
    }
  });
});

以上代码中，通过jQuery监听分页组件中的点击事件，当点击的不是当前页的页码时，移除分页组件中所有页码对应的active类，添加当前点击页码对应的active类。最后可以添加其它的代码，完成跳转到相应页面的功能。

示例1：

在分页组件中引入更多的页码，需要时可根据需要调整。同时，也可以根据需要修改上一页和下一页按钮。

<nav aria-label="Page navigation">
  <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 active"><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="#">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>

示例2：

根据数据总数和每页显示的数据条数，生成分页组件，并可以实现跳转到相应页面的功能。

var totalCount=200,pageSize=10,pageIndex=1;
var pageCount=Math.ceil(totalCount/pageSize);

var pageHtml='<nav aria-label="Page navigation"><ul class="pagination">';
pageHtml+=pageIndex===1?'<li class="page-item disabled"><a class="page-link">上一页</a></li>':'<li class="page-item"><a class="page-link">上一页</a></li>';
for(var i=1;i<=pageCount;i++){
    if(i===pageIndex){
        pageHtml+='<li class="page-item active"><a class="page-link">'+i+'</a></li>';
    }else{
        pageHtml+='<li class="page-item"><a class="page-link">'+i+'</a></li>';
    }
}
pageHtml+=pageIndex===pageCount?'<li class="page-item disabled"><a class="page-link">下一页</a></li>':'<li class="page-item"><a class="page-link">下一页</a></li>';
pageHtml+='</ul></nav>';

$(document).on('click', '.pagination a', function(e){
    e.preventDefault();
    var $this = $(this);
    if (!$this.parent().hasClass('active')) {
      var pageIndex = parseInt($this.text());
      renderList(pageIndex,pageSize);//渲染数据
      $(".pagination").html(renderPage(pageIndex, pageCount))//重新生成分页组件并替换原有的分页组件
    }
});

renderList(pageIndex,pageSize);//初始化页面，渲染第1页数据
$(".pagination").html(renderPage(pageIndex, pageCount));//初始化页面，渲染分页组件

以上代码中，通过算出总页数、生成分页组件、监听点击事件并重新渲染页面，完成翻页效果及跳转到相应页面的功能。

阅读剩余 59%