Bootstrap分页

Bootstrap分页是一种常用的网页分页样式，适用于需要分页功能的网站。它基于Bootstrap框架，使用简单方便，可以根据需要自定义样式。

使用步骤

1. 引入Bootstrap的css和js文件。

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
   

2. 添加一个分页容器。

   <nav aria-label="Page navigation example">
     <ul class="pagination">
       <!-- 分页按钮将在此处生成 -->
     </ul>
   </nav>
   

3. 使用JavaScript生成分页按钮并添加点击事件。

   // 分页参数
   var currentPage = 1;    // 当前页码
   var pageSize = 10;      // 每页显示数量
   var totalCount = 100;   // 总数据量
   
   // 生成分页按钮
   var totalPages = Math.ceil(totalCount / pageSize);  // 总页数
   var pagination = '';   // 分页按钮的html代码
   for (var i=1; i<=totalPages; i++) {
     var active = '';
     if (i === currentPage) {
       active = ' active';
     }
     pagination += '<li class="page-item'+active+'"><a class="page-link" href="#" data-index="'+i+'">'+i+'</a></li>';
   }
   $('ul.pagination').html(pagination);
   
   // 添加分页按钮点击事件
   $('ul.pagination a.page-link').click(function(event) {
     event.preventDefault();
     var index = $(this).data('index');
     if (index === currentPage) {
       return;
     }
     currentPage = index;
     // TODO: 根据当前页码获取数据并更新页面
   });
   

自定义样式

Bootstrap分页支持自定义样式，可以通过修改Bootstrap的样式或者添加自定义的样式来实现。以下是一个自定义样式的示例。

/* 修改Bootstrap的样式 */
.pagination .page-item.active .page-link {
  background-color: #007bff;
  border-color: #007bff;
}

/* 自定义样式 */
.pagination {
  margin-top: 20px;
  text-align: center;
}
.pagination li {
  display: inline-block;
  margin: 0 2px;
  font-size: 14px;
}
.pagination li a {
  display: block;
  padding: 10px;
  color: #333;
  background-color: #f7f7f7;
  border: 1px solid #e4e4e4;
}
.pagination li a:hover {
  color: #333;
  text-decoration: none;
  background-color: #e4e4e4;
  border-color: #e4e4e4;
}
.pagination li.active a {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

注意事项

• 分页参数需要根据实际情况修改。
• 分页按钮的点击事件需要根据实际情况修改。
• 自定义样式需要根据实际情况修改。

参考链接

• Bootstrap分页官方文档：https://getbootstrap.com/docs/5.1/components/pagination/
• Bootstrap文档中文版：https://v5.bootcss.com/docs/5.1/components/pagination/